jQuery 如何将 javascript 变量添加到 HTML 图像 src 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15733227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a javascript variable to HTML image src tag
提问by Cliff
I knowthis answer is out here, but I have been unable to find it (or at least recognizeit when I saw it!). I'm a relative noob to jquery, so bear with me please.
我知道这个答案就在这里，但我一直无法找到它（或者至少在我看到它时认出了它！）。我是 jquery 的相对菜鸟，所以请耐心等待。
Problem:
问题：
I have 20 images, named 1.pngthrough 20.png. I would like a different image to display randomly each time a user clicks a button.
我有 20 张图片，命名为1.png到20.png。我希望每次用户单击按钮时随机显示不同的图像。
What's working:
什么工作：
My javascript code to generate the random number looks like this:
我生成随机数的 javascript 代码如下所示：
var randomImage = 1 + Math.floor(Math.random() * 20);
What's not...
什么不是...
What I'm trying to do is pass the result of that to my HTML document as the name of the image, so that is reads something like this:
我想要做的是将结果作为图像的名称传递给我的 HTML 文档，以便读取如下内容：
<img id="randImg" class="img_answer" src="randomImage.png">
I tried concatenating, but can't seem to figure this out. Do I need to create a function that affects the img ID or class? Can anyone point me to the cleanest way to do this?
我尝试连接，但似乎无法解决这个问题。我是否需要创建一个影响 img ID 或类的函数？谁能指出我最干净的方法来做到这一点？
回答by Mooseman
var randomImage = 1 + Math.floor(Math.random() * 20);
var imgName = randomImage+".png";
$("#randImg").attr("src",imgName);
回答by Chris Moschini
Spelling it out a bit to help teach:
将其拼写出来以帮助教学：
On your page you'd have something like this:
在你的页面上，你会有这样的东西：
<img id=randomImage />
And probably in the head to hide the image until you've picked one to load, this:
并且可能在头部隐藏图像，直到您选择要加载的图像，此：
<style>
#randomImage {
width: 400px; height: 200px; /* or whatever the dimensions are */
visibility: hidden;
}
</style>
Then in your Javascript:
然后在您的 Javascript 中：
var ordinal = 1 + Math.floor(Math.random() * 20);
$('#randomImage').css('visibility', 'visible').attr('src', ordinal + '.png');
So the HTML lays out the img tag, and some early CSS sets its dimensions and hides it so there's no ugly broken image icon etc in some browsers - just a blank space.
所以 HTML 布局了 img 标签，一些早期的 CSS 设置了它的尺寸并隐藏了它，所以在某些浏览器中没有丑陋的破碎图像图标等 - 只是一个空白区域。
Then eventually the Javascript loads and runs, determining a random ordinal. The second line of Javascript calls jquery to make the img visible and set its src attribute to the random image.
然后最终 Javascript 加载并运行，确定一个随机序数。第二行 Javascript 调用 jquery 使 img 可见并将其 src 属性设置为随机图像。
回答by gashu
$(document).ready(function() {
var randomImage = 1 + Math.floor(Math.random() * 20),
img = randomImage + ".png";
$("#randImg").attr("src", img);
});
回答by Lemurr
Just add some default image to imgtag to prevent displaying nothing if user has disabled JavaScript, and then in jQuery use $("#randImg").attr("src", randomImage + ".png");
只需在img标签中添加一些默认图像以防止在用户禁用 JavaScript 时不显示任何内容，然后在 jQuery 中使用$("#randImg").attr("src", randomImage + ".png");
回答by smac2020
var thesoruce = "http://localhost:8080/content/dam/admin/" + id ;
g_fb.find('p').append('<img src= '+thesoruce +' height="250px" width="600px">');
