如何将 javascript 变量添加到 HTML 图像 src 标记

Posted 2023-02-25

【中文标题】如何将 javascript 变量添加到 HTML 图像 src 标记

【英文标题】：How do I add a javascript variable to HTML image src tag

【发布时间】：2013-03-21 22:11:06

【问题描述】：

我知道这个答案在这里，但我一直找不到它（或者至少当我看到它时识别它！）。我是 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 或类的函数？谁能指出最干净的方法来做到这一点？

【问题讨论】：

那是 Javascript，不是 jQuery。

正如@SLaks 指出的那样，Javascript 通常是在浏览器上运行的语言。 jQuery 是一个使在 Javascript 中做一些事情变得更容易的库。一般来说，如果你看到 $('something here')，那就是 jQuery - 其余的是 Javascript。

【参考方案1】：

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

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

【讨论】：

没那么多，但比较简单。

感谢 Mooseman 以及所有提供帮助的人。 Mooseman，您的 jsfiddle 代码就像 jsfiddle 上的魅力一样，但我还有其他问题导致了问题。没有控制台错误，并且新的正确图像路径在控制台中短暂闪烁，但是图像在我的站点上从未更改。在寻求更多帮助之前，我还有很多事情要做，但我要感谢所有插话的人。干杯，克里夫

@Cliff 乐于助人。请为未来的用户标记“最佳答案”。

【参考方案2】：

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

【参考方案3】：

拼写一下以帮助教学：

在你的页面上你会有这样的东西：

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

【参考方案4】：

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

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

【参考方案5】：

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

 g_fb.find('p').append('<img src= '+thesoruce +'   >');