JavaScript 将 img src 替换为 External src答案

【问题标题】：JavaScript replace img src with External srcJavaScript 将 img src 替换为 External src
【发布时间】：2014-05-07 12:23:05
【问题描述】：

我有一个奇怪的问题，我无法弄清楚。

我在网页上有一张普通图片

<img src="images/logo.png"/>    <!-- getting image from root directory -->

我有一些 javascript 代码来替换图像源

function imageUpdate() {
    var image = document.querySelectorAll("img");
    for (var num = 0; num < image.length; image++)
        image[num].src = image[num].src.replace("images/pic01.png", "images/other/pic02.png")
}

这段代码工作得很好，虽然它似乎会在我想要替换它的 src 位于我的根目录之外时立即崩溃，例如“http://www.servername.com/pic03.png”//（这是一个虚构的 URL，不要尝试点击它）。

发生这种情况有什么原因吗？有没有办法解决这个问题？

【问题讨论】：

我已经测试了新的 img src 可以工作
我使用这个网址进行测试oecd.org/media/oecdorg/directorates/developmentcentre/…>
将http://www. 添加到源代码的开头。
我已经用下面的网址oecd.org/media/oecdorg/directorates/developmentcentre/…试过了
它看起来像是取出了www。在评论部分，但它肯定在我的代码中

标签： javascript image url replace src

【解决方案1】：

问题是您只替换原始 src 的最后一部分。 img 标签的 src 首先是这样的：

“http://yourserver.com/images/pic01.png”

...用您的外部 URL 替换“images/pic01.png”后，它看起来像这样：

“http://yourserver.com/http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png”

为了避免这个问题，你可以试试这个：

function imageUpdate() {
    var image = document.querySelectorAll("img");
    for (var num = 0; num < image.length; num++) {
        if (stringEndsWith(image[num].src, "images/pic01.png")) {
            image[num].src = "http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png";
        }
    }
}

function stringEndsWith(string, suffix) {
    return string.indexOf(suffix, string.length - suffix.length) !== -1
}

在你的 for 循环中也有一个错误，你正在递增 image 而不是 num

分步说明

imageUpdate()
循环遍历每个 img 标签并查看 src 属性
如果 src 以“images/pic01.png”结尾，则将所有 src 替换为新的 url

stringEndsWith()
查找给定后缀的索引（开始在最后可能的位置查找后缀后缀可以位于)
如果找到这个索引（不同于-1）返回true，否则返回false

【讨论】：

这非常有效，我赞扬你理解我可怕的格式化 URL
哦，我没有看到 image++ 增量（那只是我是个白痴）它在我的代码中不是这样，我的错
我阅读这段代码的次数越多，它给我的印象（和困惑）就越多。我非常感谢它的工作原理，但我讨厌使用我不理解的代码，我可以成为一个完整的菜鸟并要求你为我完成它吗？
非常感谢 Johan，你是 javascript 黑带
我添加了一个小改动

【解决方案2】：

您尝试使用的链接有错误。实际链接应该是：

http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png

下面是代码来演示：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
function changeImage() {
    document.getElementById('changeThis').src = 'http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png'
}
</script>
</head>
<body>
<img id="changeThis" src="http://www.wartburgseminary.edu/uploadedImages/Resources/small-twitter-icon.jpg">
<input type="button" value="Change" onClick="changeImage()">
</body>
</html>

【讨论】：

评论区的格式不断打断我的链接，如何在评论区写一个不会被格式化的url？
当试图显示链接的代码时，不要使用 []() 语法，这实际上会创建一个链接。相反，要制作“代码”，请在代码周围使用这些标记。此外，当您创建评论时，评论框旁边有一个帮助链接。这会告诉你所有你需要知道的。
天哪，难怪我以为那些是引号 ' 而不是 `
http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png
http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png

【解决方案3】：

<script>

function imageUpdate() {

    document.getElementById('imageT').src = 'test.jpg';

}

</script>

<img id='imageT' src="images/logo.png"/>    <!-- getting image from root directory -->

JS Fiddle-Demo

【讨论】：

该代码用于更改 img src 它仅在 URL 以 www 开头时停止工作。
我正在使用这个 URL http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png // 我添加了随机句号因为评论部分保持格式出那部分
uri 无效，请检查
URL 正确的任何方式它都可以在任何地方使用，除非它被替换，当图像 URL 错误时它会显示为“x”虽然 URL 是正确的我只是不知道是否javascript 将其作为字符串而不是 URL 或类似的东西放入源代码中
它唯一无效，因为我在 h.t.tp 部分放了两个句号，把它们拿出来就可以了

【解决方案4】：

您分配给它的目标网址是什么？确保它指向一个绝对地址（将 http:// 部分放在开头）。

如果文件在同一台服务器上，您仍然可以使用相对文件路径，并使用两个点向上上一级文件夹。例如：../someotherfolder/pic03.jpg

【讨论】：

哇，只是没有......客户端请求应该是一个 url，而不是相对路径。
我将这个 URL 用于测试目的 oecd.org/media/oecdorg/directorates/developmentcentre/…> 只是为了确保它有效
它不喜欢那里的评论oecd.org/media/oecdorg/directorates/developmentcentre/…中的图像标签，只是为了让您看到它不是URL问题
在您之前使用 img 标签的评论中，您没有包含 http://，所以您是否可能没有在其他代码中使用格式正确的 url？
我使用这个 URL -- http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png // 我添加了句号因为评论部分不断格式化该部分