在 html img 标签中使用函数的结果答案

【问题标题】：Use result of function in html img tag在 html img 标签中使用函数的结果
【发布时间】：2014-09-10 20:55:25
【问题描述】：

我尝试使用 javascript 函数的结果来填充 IMG 标签的 'src' 值。我想在同一页面的许多地方使用它，否则我想我可以在 IMG 标记中使用一个 ID 并用 getelementbyid 更改 src。

这个想法是根据用户屏幕的大小加载图像。

没有给我正确结果的代码：

<html>
<head>
    <script>
        function path_images(image)
        {
            var s = screen.width;
            path = (s<1080) ? "small":"large";
            return path + "/" + image;
        }
    </script>
</head>

<body>
    <h1>Some text</h1>
    <img alt="error" src=path_images("someimage.png")>
    <img alt="error" src=path_images("someotherimage.png")>
</body>

请告诉我该怎么做。

【问题讨论】：

仅供参考，s<1080 周围不需要括号。
src属性中不能放js函数
将 the picture element 与 JavaScript shim 一起使用。不要重新发明轮子。尤其是当您的 JS 技能水平处于尝试在浏览器期望 URL 的地方编写 JavaScript 时。
@ron，css媒体查询可以帮到你，你也不需要js来做这个

标签： javascript html function

【解决方案1】：

你可以试试这个。它选择带有标签 img 的所有元素并更改每个 SRC。如果您想更改单个图像的来源，您应该使用 ids 或任何其他标识符。

function changeSource() 
{
  aImgs = document.getElementsByTagName("img"); 
  for ( var index in aImgs )
     aImgs[ index ].src = path_images( image_here );
}

【讨论】：

【解决方案2】：

抓取图片：

var images = document.querySelectorAll('img');

将节点列表转换为数组并在其上循环更新src。

Array.prototype.slice.call(images).forEach(function (img) {
  img.src = path_images(img.getAttribute('src'));
});

【讨论】：

【解决方案3】：

@ron 为此你只需要在 body onload 上调用一个函数，这个函数会做什么？此函数将首先获取屏幕宽度，然后在决定是小还是大之后，它将抓取页面上的所有图像及其 src 属性，然后循环遍历它们中的每个（可能是 foreach）相同正文 onload 函数并在路径之前连接小号或大号，这将满足您的要求。

不能在img src标签上调用函数，它可以在onclick事件中调用。每个 javascript 函数都会在某个事件中被调用。

【讨论】：