如何在img src html标签中添加变量

时间:2014-07-28 07:20:51

标签: javascript jquery html asp.net

<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>

我想在img src中添加一个变量。 我有很多像这样的img src ..我不能继续改变域名更改所以我想添加一个变量来代替相对图像路径

4 个答案:

答案 0 :(得分:2)

您可以使用以下方法替换domain_name src属性。

首先更正您的标记,并将src值与domain_name放在双引号中,如下所示

<img src="domain_name/images/place1a.svg">

使用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>

答案 1 :(得分:2)

如果您使用的是Razor Engine,可以这样写:

@{ string domain_name = "www.abc.com"; }

...

<img src="@domain_name/images/etc."

答案 2 :(得分:-2)

这是php语言。您可以在html中编写div,并在img标记内写这样的地方。

 <?php echo "http://" . $_SERVER['SERVER_NAME'] ."and here you add your image.png or whatever" ?>

答案 3 :(得分:-2)

试试这个:

<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>