如何将JavaScript变量添加到HTML图片的src标签？

Question

我知道这个答案已经存在了，但是我一直没有找到它（或者至少在我看到它的时候没有认出来！）。我对jquery相对陌生，请耐心等待。

问题：

我有20张图片，分别命名为1.png到20.png。我希望每次用户点击一个按钮时都会随机显示不同的图片。

已有进展：

我的JavaScript代码用于生成随机数，如下所示：

var randomImage = 1 + Math.floor(Math.random() * 20);

这不是什么...

我的目的是将其结果作为图像名称传递给 HTML 文档，使其读取类似于：

 <img id="randImg" class="img_answer" src="randomImage.png">

我尝试过拼接，但似乎无法解决这个问题。我需要创建一个影响img ID或class的函数吗？有人能指点一下最简洁的方法吗？

- Cliff

---

这是 JavaScript，不是 jQuery。 - SLaks

正如@SLaks所指出的那样，Javascript通常在浏览器上运行。jQuery是一个库，使得在Javascript中完成某些任务变得更加容易。通常如果您看到$('something here')，那就是jQuery的作用 - 其余部分则是Javascript。 - Chris Moschini

Answer 1

var randomImage = 1 + Math.floor(Math.random() * 20);    
var imgName = randomImage+".png";
$("#randImg").attr("src",imgName);

演示： http://jsfiddle.net/a9Ltw/

- Mooseman

---

不是很多，但它更简单。 - Mooseman

感谢Mooseman和所有提供帮助的人。 Mooseman，您的jsfiddle代码在jsfiddle上运行得非常好，但我有其他问题导致了问题。没有控制台错误，并且新的正确图像路径会在控制台中短暂闪现，但是图像在我的网站上从未更改过。在寻求更多帮助之前，我还需要学习更多知识，但我想感谢所有发表意见的人。干杯，Cliff - Cliff

@Cliff 很高兴能够帮助。请为未来的用户标记一个“最佳答案”。 - Mooseman

Answer 2

为帮助教学，我再详细解释一下：

在您的页面上，您需要像这样编写内容：

<img id=randomImage />

也许可以在头部隐藏图像，直到选择要加载的图像为止：

<style>
#randomImage {
    width: 400px; height: 200px; /* or whatever the dimensions are */
    visibility: hidden;
}
</style>

然后在您的Javascript代码中：

var ordinal = 1 + Math.floor(Math.random() * 20);
$('#randomImage').css('visibility', 'visible').attr('src', ordinal + '.png');

所以HTML排列出img标签，有些早期的CSS设置其尺寸并隐藏它，这样在某些浏览器中就不会出现丑陋的破图像图标等 - 只有一个空白的空间。

然后最终Javascript加载和运行，确定一个随机序数。第二行Javascript调用jquery使img可见，并将其src属性设置为随机图像。

- Chris Moschini

Answer 3

$(document).ready(function() {
    var randomImage = 1 + Math.floor(Math.random() * 20),    
                img = randomImage + ".png";

    $("#randImg").attr("src", img);
});

- gashu

Answer 4

为了防止用户禁用JavaScript后无法显示图片，可以在img标签中添加默认图片，然后在jQuery中使用$("#randImg").attr("src", randomImage + ".png");

- Lemur

Answer 5

var thesoruce = "http://localhost:8080/content/dam/admin/" + id ;

 g_fb.find('p').append('<img src= '+thesoruce +'  height="250px" width="600px">');

- smac2020