在 html img src 代码中调用 JavaScript 函数（随机图像生成器）答案

【问题标题】：Calling JavaScript function (random img generator) inside html img src code在 html img src 代码中调用 JavaScript 函数（随机图像生成器）
【发布时间】：2018-10-25 20:50:22
【问题描述】：

我已经在网上搜索过所有旧的 Stack Overflow 帖子。我一直在尝试一种建议您使用带有空 src="" 地址的 html 标记的方法：

<img id = "imageid" src="">

然后是对应的Javascript代码：

  function randomImg(){
var randomNumber = Math.floor(Math.random() * 12) + 1;
var imgName = "img_" + randomNumber + ".jpg";
document.getElementById("imageid").src= YOUR_IMG_PATH + "/" + imgName ;
}

因此，我有 12 张图片，全部命名为 img_1.jpg 到 img_12.jpg，是的，我检查了他们的导演并让他们通过我网站上的此功能加载，奇怪，仅通过将此代码用于按钮。我不只是通过标准的 html img 标签加载图像就成功了：

<button type="button" onclick="randomImg()">Try it</button>

我看过其他推荐使用 document.onload = function() 的旧帖子，但这对我不起作用（我还发现了一篇帖子，其中 Stack Overflow 用户声明 document.onload 将不会为空的src="" 标记生成一个img src 地址）。我一直尝试以不同的方式格式化，即在代码的某些部分使用 '' 而不是 ""。

我最后的努力是使用数组，但我想看看我是否可以按照我现在的方式解决这个问题，因为我觉得我错过了一些完全基本和明显的东西。

网站是http://aemaeth0.github.io

【问题讨论】：

如果它适用于按钮，为什么它不能在其他地方工作？请对您的愿景更加清晰和简洁。您是否希望在没有按钮或其他 DOM 事件的情况下自动加载图像？如果是这样，请参阅onload 之类的替代方案。否则要清楚最终结果。即使您说您尝试过 document.onload 包含您尝试过的代码，所以我们有一个很好的起点
使用window.onload:jsfiddle.net/4re19v9m（你可能会更幸运地搜索“页面加载后运行JS代码”，而不是专门寻找加载图像；总是将问题分解成部分。第一个谷歌结果：stackoverflow.com/questions/807878/…)
@aemaeth0 我刚刚测试了您的网站，按钮似乎工作正常。图像是按预期随机设置的。你想完成什么？
@FrenchMajesty 我想使用加载它并且没有按钮。我只是将按钮放在那里进行测试，看看我是否可以首先加载图像，因为我最初得到的是一个空框。
谢谢@ChrisG！

标签： javascript html css image src

【解决方案1】：

好的，谢谢你们，我使用了@Chris G 提供的代码更改。本质上是他通过函数传递“id”并使用window.onload。这是确切的代码：

<img id="img1" src="">
    <script>
    function randomImg(id) {
    var randomNumber = Math.floor(Math.random() * 12) + 1;
    var imgName = "img_" + randomNumber + ".jpg";
    document.getElementById(id).src= imgName;
    }
    window.onload = function() {
  randomImg("img1");
    }
    </script>

我用 Java、C++ 和 MATLAB 编写过代码，并在 Uni 学习过数据结构/面向对象编程，但没有学过很多 Javascript 和小语法原则（例如在函数中将 id 作为参数传递）让我失望。

我希望这可以帮助任何试图通过 javascript 在他们的网站上随机生成图像的人，尤其是如果他们不想使用数组。

再次感谢所有的帮助！

【讨论】：

我必须指出一些事情：1. 在页面加载后调用代码并将随机 src 分配给 <img> 是两个几乎不相关的独立问题 - 2. 传递 id 参数仅当您有多个图像时才有用/需要 - 3. 使用数组是第三种不相关的技术，而不是您问题的替代解决方案；如果您的图像有任意文件名，则需要它 - 4. 这个问题是重复的，不会使任何人受益，而且您的答案更加具体，帮助任何人的机会更小