相对图像损坏，需要javascript修复

Relative images broken, need javascript fix

本文关键字：javascript 修复 需要 图像 损坏 相对      更新时间：2023-09-26

此处为new。我无法访问我网站上的大多数源文件，所以我试图用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，以便在页面加载时加载它。谢谢大家。

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

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'));
    }
}

演示

欢迎来到SO！

这种方法的问题在于，对于动态页面来说，更改正文的纯HTML从来都不是一个好主意。此外，当在没有正则表达式的情况下使用javascript的replace时，它将只替换字符串的第一个位置。

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

  • http://www.w3.org/TR/DOM-Level-2-Core/introduction.html
  • http://www.w3schools.com/jsref/dom_obj_document.asp

使用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;
    }
}
相关文章：