javascript - 如何将 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 或类的函数？谁能指出我最干净的方法来做到这一点？

Answer 1

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

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

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 属性设置为随机图像。

Answer 3

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

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

Answer 4

只需在img标签中添加一些默认图像以防止在用户禁用 JavaScript 时不显示任何内容，然后在 jQuery 中使用$("#randImg").attr("src", randomImage + ".png");

Answer 5

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

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