Question

目前我正在尝试将点击图片更改为其他图片。我已设法使用以下代码执行此操作:(工作）

 <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文件夹中有这些名称。

Answer 1

如果此页面位于root上的文件夹内，则该路径将相对于当前目录，除非您使用

img.src = '/selectedimg.png'

例如......

您还可以使用<base> html标记重置当前页面的基本网址

<!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

Answer 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'" />

那就是它。我希望它有用：）

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

2 个答案: