從data-src屬性設置img src

我試圖使用jquery設置多個圖像的data-src屬性的img src屬性，但代碼無效。 Img src不會改變。從data-src屬性設置img src

下面是查看我的代碼的鏈接。

jQuery(document).ready(function($){ 
 
    $('.container figure.images').each(function(index, element){ 
 
    var thisImage = $(this); 
 
    var canvas = thisImage.find("canvas").get(0); 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.rect(298, 0, 984, 329); 
 
    ctx.rect(0, 329, 1280, 514); 
 
    ctx.clip(); 
 
    img = new Image(); 
 
    img.onload = function() { 
 
    ctx.drawImage(this, 0, 0, img.width, img.height); 
 
    var imgNew = canvas.toDataURL("image/png"); 
 
    thisImage.find("img").attr('src', imgNew); 
 
    }; 
 
    img.src = thisImage.find("img").attr('data-src'); 
 
}); 
 
});

.container figure img { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<section class="platform"> 
 
     <div class="container"> 
 

 
     <figure class="images"> 
 
      <canvas width="1280" height="843" style="display: none"></canvas> 
 
      <img src="#" data-src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="description" /> 
 
     </figure> 
 

 
     <figure class="images"> 
 
      <canvas width="1280" height="843" style="display: none"></canvas> 
 
      <img src="#" data-src="https://www.dropbox.com/s/bl5yz4itgbo1ggl/2.jpg" alt="description" /> 
 
     </figure> 
 

 
     <figure class="images"> 
 
      <canvas width="1280" height="843" style="display: none"></canvas> 
 
      <img src="#" data-src="https://www.dropbox.com/s/bl5yz4itgbo1ggl/2.jpg" alt="description" /> 
 
     </figure> 
 

 
     </div> 
 
    </section>

感謝所有，並有一個偉大的日子。

來源

2017-07-09 zeronove

您的代碼就可以了，這是你的URL這是不對的，Dropbox的沒有返回的圖像，但一個網頁，如果你改變正常的圖像這些網址它會工作（我對收到的一些錯誤儘管加載代碼） – hardkoded

與問題無關，但您有兩個'var img'聲明。你從不使用第一個。 – Barmar

似乎有兩個問題，我可以看到：

Dropbox的被重定向你的下載，使你得到回的數據不是一個圖像，而是一個Dropbox的HTML頁面。

儘管如此，我還是無法讓您的畫布繪圖工作（這可能是可能的，但它不適用於我）。我能夠重構它來插入一個新的img標籤，其中src由data-src設置。如果你在.images元素上設置data-src，然後沒有默認的canvas或img標籤，這可能是最有效的。如果你真的想要寬度和高度屬性，你也可以這樣做。

$(document).ready(function() { 
    $('.container figure.images').each(function(i, e) { 
    var url = $('img', e).attr('data-src'); 
    $(e).append($('<img>', { 'src': url })); 
    }); 
});

我也改變了你的數據-SRC值之一，以「https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png」看到，IMG沒有工作，只是不能與Dropbox的版本。

HTH

來源

2017-07-09 21:19:44 Mike

從data-src屬性設置img src

回答

相關問題