我如何添加一个javascript变量到HTML图像src标签

How do I add a javascript variable to HTML image src tag

本文关键字：变量 HTML 图像 标签 src javascript 何添加 添加 一个      更新时间：2023-09-26

我知道这个答案在这里，但是我一直无法找到它(或者至少在我看到它时认出它!)。对于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或类的函数吗?谁能告诉我最干净的方法?

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

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

拼出来一点帮助教学:

在你的页面上应该有这样的内容:

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

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

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

var thesoruce = "http://localhost:8080/content/dam/admin/" + id ;
 g_fb.find('p').append('<img src= '+thesoruce +'  height="250px" width="600px">');
相关文章：