在不编辑html的情况下更改img标签图像的有效方法？

Question

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

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

我想将 /icons/ugly/powerpoint.gif 更改为 /icons/pretty/powerpoint.gif< /code> 但我不允许修改 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";

确保您的目标图像有一个唯一的 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 更改显示的背景图像。

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

Answer 6

将 pretty/powerpoint.gif 移动到 ugly/powerpoint.gif

Answer 7

您应该使用 Javascript/Jquery 来完成此操作。 Jquery 是更简单的选择。只需在 Jquery 官方网站查找 .attr() 示例并更改图像的源路径即可。