相关图像损坏，需要 javascript 修复答案

【问题标题】：Relative images broken, need javascript fix相关图像损坏，需要 javascript 修复
【发布时间】：2014-10-28 13:16:40
【问题描述】：

这里是新的。我无法访问我网站上的大多数源文件，因此我正在尝试使用 javascript 在页面加载时修复一些损坏的图像。

当我对这些损坏的图像之一使用检查元素时，它显示如下：

<img src="-82.jpg" width="60px">

他们应该在什么时候

<img src="http://example.com/files/images/-82.jpg" width="60px">

这是一堆不同的图像，-82.jpg，-2482.jpg，-3582.jpg

这是我迄今为止尝试过的。这似乎可行，但由于某种原因，它会破坏页面上的其他 javascript。

html

<script type="text/javascript" src="http://example.com/files/js/fiximages.js"></script>
<body onload="fixImages();">

我的 fiximages.js 文件

function fixImages() {
    var toReplace = '<img src="-';
    var replaceWith ='<img src="http://www.example.com/files/images/-';
    document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}

我有点菜鸟，所以我还需要知道如何将 html 链接到 javascript 以在页面加载时加载它。谢谢大家。

【问题讨论】：

你可以使用 JQuery 吗？
@Bonatoc 我认为加载整个库来完成这么小的任务并不是一个好主意。
你说得对。已经很晚了，我感觉有点懒惰。因为他是个菜鸟，所以他也会学习一些 JQuery。我同意我们现在倾向于纯 Javascript 网络应用程序。顺便说一句，我在下面为您的答案投票。

标签： javascript html image replace

【解决方案1】：

欢迎来到 SO！

您的方法中的问题是，更改正文的纯 HTML 对于动态页面来说绝不是一个好主意。此外，javascript 的replace，在不使用正则表达式时，将仅替换字符串的第一次出现。

现在，当您需要更改元素的属性时，Javascript 有一个称为 DOM 的操作。网上有很多资料和教程……你应该看看！

使用 DOM，您可以选择一个元素作为变量，并操作其属性和属性，因此，在您的情况下，它将是：

function fixImages() {
    var imgs = document.getElementsByTagName("img");
    for(var i=0; i<imgs.length; i++) {
        if(imgs[i].src.indexOf("-") == 0)
            imgs[i].src = "http://www.example.com/files/images/" + imgs[i].src;
    }
}

【讨论】：

刚刚添加了检查...无论如何，+1 给你使用querySelector
我删除了评论，因为您同时编辑了答案。 :)

【解决方案2】：

这应该可以解决您的问题：

function fixImages() {
    // Create a list of all img which src starts with "-".
    var imgs = document.querySelectorAll('img[src^="-"]');

    // Loop through this list.
    for (var i = 0; i < imgs.length; i++) {
        // For each img, replace its src with the correct path + the
        // src that's already there.
        imgs[i].setAttribute('src', 'http://www.example.com/files/images/' + imgs[i].getAttribute('src'));
    }
}

Demo

【讨论】：

如果您希望脚本仅在整个页面加载时运行，包括所有图像，请参考：developer.mozilla.org/en-US/docs/Web/API/…
标记为已解决，感谢您的链接。我一直想知道如何实现这一点。