Question

我有一个显示可下载文件搜索结果的页面。在每个搜索结果旁边，我都有一个图标来表示文件类型，如下所示：

<img src="/icons/ugly/powerpoint.gif" />

我想将/icons/ugly/powerpoint.gif更改为/icons/pretty/powerpoint.gif，但我不允许修改HTML。使用/icons/pretty/powerpoint.gif代替/icons/ugly/powerpoint.gif的最佳方式是什么？

我的想法是在加载页面后使用javascript来执行此操作，但不确定这是不是一个好主意。

Answer 1

如果您无法编辑HTML，则有两个选项。

1）服务器端，可能通过使用URL重写来修改检索到的图像。

RewriteRule ^(.*)/ugly/(.+\.gif)$ $1/pretty/$2 [L]

2）客户端，使用JavaScript或基于JavaScript的一些库工具（如jQuery）更改src属性。

jQuery代码处理所有图像来实现这一点：

$('img').attr('src', function(i, src) {
   return src.replace(/\/ugly\//, '/pretty/');
});

Answer 2

您可以在加载DOM后运行此脚本，但是您将加载效率低下的两个图像：

var imgList = document.getElementsByTagName('img').
    img,
    src;

for(var i = 0; i < imgList.length; i++) {
    img = imgList[i];
    src = img.src;
    img.src = src.replace(/\/ugly\//, '/pretty/');
}

Answer 3

唯一的办法就是使用JavaScript，没有别的办法。使用JavaScript，您可以操作DOM并更改img实体的src属性。严格来说，您不是以这种方式更改HTML，而是HTML的内部浏览器表示。

var picture = document.getElementById("picture"); 
picture.src = "new_picture.jpg";

确保你的目标img有一个唯一的ID - 这不是必需的，但可以更容易地查找实体。

Answer 4

是的，您可以使用JavaScript来更改任何图像的src。您首先需要使用ID或类名来识别哪个图像。

document.getElementById('img1').src='....new value';

Answer 5

如果你想在解析html后更改它，而不重新加载页面，你唯一的选择就是使用JavaScript来改变图像的src属性。

假设您的图片的ID为'myimage'。

document.getElementById('myimage').setAttribute('src', '/icons/pretty/powerpoint.gif');

这样您的图片将有一个新的来源，并将下载并显示新图像而不是之前的图像。

无论如何，如果你有许多像你所说的相同src的图像，你应该使用空的html元素，如div，并为每个使用css分配相同的背景图像。然后，您可以更改使用JavaScript显示的背景图像。

这样，您只需为同一类型（或类）的所有图像指定图像的网址。

Answer 6

将pretty/powerpoint.gif移至ugly/powerpoint.gif

Answer 7

您应该使用Javascript / Jquery执行此操作。 Jquery是更容易的选择。只需在Jquery官方网站上查找.attr()示例并更改图像的源路径。

有效的方法来改变img标签的图像而无需编辑html？

7 个答案: