javascript 如何在img src html标签中添加变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24990259/
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 to add variable in the img src html tag
提问by Vaibs_Cool
<script>
var domain_name="www.abc.com"
</script>
<div id="tp_otherinfo" style="top: 558px;">
<div class="cls_footerImg" id="divFooterMainqqqq">
<div id="footerimgDiv1">
<img src=domain_name+"/images/place1a.svg"><span id="id_places" class="clsFooterHead">1 Places</span></div>
<div class="footerimgDiv2">
<img src=domain_name+"/images/calendara.svg"><span id="id_days" class="clsFooterHead">3 Days</span></div>
<div class="footerimgDiv2">
<img src=domain_name+"/images/photos1a.svg"><span id="id_photos" class="clsFooterHead">8 Photos</span></div>
<div class="footerimgDiv2">
<img src=domain_name+"/images/reviews1a.svg"><span id="id_review" class="clsFooterHead">7 Reviews</span></div>
<div class="footerimgDiv2">
<img src=domain_name+"/images/timea.svg"><span id="id_date" class="clsFooterHead">6th February 2014</span></div>
</div>
</div>
I want to add a variable in img src. I have many img src like this ..i cant keep on changing the domain change so i wanted to add a variable in place of relative image path
我想在 img src 中添加一个变量。我有很多这样的 img src ..我不能继续改变域的变化，所以我想添加一个变量来代替相对图像路径
回答by Bhushan Kawadkar
You can use below work around to replace your domain_namefor src attributes.
您可以使用以下解决方法来替换您的domain_namefor src 属性。
First correct your markup and put srcvalue with domain_namein double quotes like below
首先更正您的标记并将src值domain_name放在双引号中，如下所示
<img src="domain_name/images/place1a.svg">
Use jQuery to replace all domain_namewith variable value -
使用 jQuery 替换所有domain_name变量值 -
<script>
var domain_name="www.abc.com"
$(function(){
$('#tp_otherinfo').find('img').each(function(){
var srcpath = $(this).attr('src');
srcpath = srcpath.replace('domain_name',domain_name);
$(this).attr('src',srcpath);
});
});
</script>
回答by Garik
If you are using Razor Engine you can write it like this:
如果你使用 Razor Engine，你可以这样写：
@{ string domain_name = "www.abc.com"; }
....
....
<img src="@domain_name/images/etc."
回答by pepper
Here is for php language. You can write your div in html, and inside img tag place like this.
这里是 php 语言。您可以在 html 中编写 div，并在 img 标签中这样写。
<?php echo "http://" . $_SERVER['SERVER_NAME'] ."and here you add your image.png or whatever" ?>
回答by Youness
try this :
试试这个 ：
<script>
//have an array with all the domains
var domain_names = ["domain1.com", "domain2.com", "domain3.com", "domain4.com", "domain5.com", "domain6.com", "domain7.com"];
//now set them
$(document).ready(function () {
var i = 0;
$("#tp_otherinfo img").each(function () {
var src = $(this).attr('src');
src = domain_names[i] + src;
$(this).attr('src', src);
i++;
});
});
</script>
<div id="tp_otherinfo" style="top: 558px;">
<div class="cls_footerImg" id="divFooterMainqqqq">
<div id="footerimgDiv1">
<img src="/images/place1a.svg"><span id="id_places" class="clsFooterHead">1 Places</span>
</div>
<div class="footerimgDiv2">
<img src="/images/calendara.svg"><span id="id_days" class="clsFooterHead">3 Days</span>
</div>
<div class="footerimgDiv2">
<img src="/images/photos1a.svg"><span id="id_photos" class="clsFooterHead">8 Photos</span>
</div>
<div class="footerimgDiv2">
<img src="/images/reviews1a.svg"><span id="id_review" class="clsFooterHead">7 Reviews</span>
</div>
<div class="footerimgDiv2">
<img src="/images/timea.svg"><span id="id_date" class="clsFooterHead">6th February 2014</span>
</div>
</div>
</div>
