如何在jQuery中由dom动态创建的图像标签中设置路径

时间:2018-07-05 20:01:53

标签: jquery html

我面临的一个问题是我有一个动态制作的图像标签,但是当我通过SRC属性分配路径时,它不起作用。请问如何获得解决方案?我的代码如下:

function GetAllProduct() {
    $("#AllProductArea").empty();
    var Count = 0;

    $.getJSON("/api/tblProducts/AllProduct", function(data) {

        $.each(data, function(key, val) {
            var pic1Path = '~/ProductsImages/' + val.PrdPic1;
            alert(pic1Path + " PP");
            $('<option>Smlr' + val.PrdName + '</option>').appendTo("#LstPrdSimlarTo");


            $('<div id="btnAreaPrd" class="btnArea"><span id=Product' + Count + ' class="IdHed">' + val.ProductId + '</span><input type="button" id=' + Count + ' value="Get Details " class="btnSaveChanges"><span class="addheddings">Quantity  </span><span class="addheddings">' + val.Quantity + '</span><span id=' + Count + ' class="UpadteHed">Upadate</span><span id=' + Count + ' class="DelHed">Delete</span></div><table id="tblProducts" class="tblLayout"><tr><td><img id=Img' + Count + ' Class="imgOrder"></td><td>  <span id="orderName" class="orderSubHed">' + val.PrdName + '</span></td><td><span id="orderPrice" class="orderSubHed">' + val.PrdDisPrice + '</span></td><td><span id="orderStatus" class="orderSubHed">' + val.StockStatus + '</span></td></tr></table><br><br>').appendTo("#AllProductArea");
            alert(Count + " countValue");
            alert('#Img' + Count);
            $('#Img' + Count).attr('src', pic1Path);

            Count = Count + 1;

        });
    });

这里我的pic路径在pic1Path变量中。请帮助我。

3 个答案:

答案 0 :(得分:-1)

您需要设置src属性。

$("#Img" + Count).attr('src', pic1Path);

答案 1 :(得分:-1)

验证<img>标签的ID,该ID必须与您设置$("#Img" + Count).attr('src', pic1Path);的位置匹配。

答案 2 :(得分:-1)

尝试此代码。如果图像源在缓存中,则必须刷新它。

pic1Path=pic1Path+"?"+CreateGuid();
$("#Img" + Count).attr('src', pic1Path);

在Document.Ready之外创建单独的功能

 function CreateGuid() {  
       function _p8(s) {  
          var p = (Math.random().toString(16)+"000000000").substr(2,8);  
          return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;  
       }  
       return _p8() + _p8(true) + _p8(true) + _p8();  
    }