正确定位图像 src（给图像一个新的 src）答案

【问题标题】：correctly locate image src (giving image a new src)正确定位图像 src（给图像一个新的 src）
【发布时间】：2017-01-28 03:39:47
【问题描述】：

目前我正在尝试将单击时的图像更改为另一个图像。我已经设法使用以下代码做到了：（工作）

 <img id="inv1imgid" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/X_mark.svg/525px-X_mark.svg.png" onclick="switchImage(this)" width="36" height="36" />
    var preselected = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/X_mark.svg/525px-X_mark.svg.png";
var selected = "https://cdn.pixabay.com/photo/2016/03/31/14/37/check-mark-1292787_960_720.png";

var switchImage = function(image) {
    if(image.src == preselected) {
        image.src = selected;
    } else {
        image.src = preselected;
    }
};

这项工作，但只有当我给 img src 一个 URL 时。我想使用：src =“selectedimg.png”和src =“preselectedimg.png”，但是当我这样做时，它似乎找不到图像，因为没有图像被切换。是的，这些图像在我的 wwwroot 文件夹中有这些名称。

【问题讨论】：

如果你想要这样的话，你的图像必须与调用它的文件的路径相同
javascript dynamically change the location of image src - NO JQuery的可能重复

标签： javascript html

【解决方案1】：

如果此页面位于根目录下的文件夹中，则路径将相对于当前目录除非您使用

img.src = '/selectedimg.png'

例如...

你也可以像这样使用<base> html标签来重置当前页面的基本url

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>This is an example for the <base> element</title>
        <base href="http://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

编辑：

也可以看看Defining root of HTML in a folder within the site root folder

【讨论】：

原来我需要的是：'显示我的完整页面 url/ + selectedimg.png'

【解决方案2】：

假设您有两张图片。

<img src="image1.jpg" id="img1" />
<img src="image2.jpg" id="img2" />

据我了解，您想单击 img2 并更改 img1。所以你需要的是 img2 标签中的这个小添加：

<img src="image2.jpg" id="img2" 
 onclick="document.getElementById('img1').src = 'image3.jpg'" />

就是这样。我希望它会有所帮助:)

【讨论】：