从 data-src 属性设置 img src

Question

>我正在尝试使用 jquery 从 data-src 属性为多个图像设置 img src 属性，但代码不起作用。图像 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>

感谢大家，祝你有美好的一天。

Answer 1

我可以看到两个问题：

Dropbox会重定向您的下载内容，以便您返回的数据不是图像，而是 Dropbox HTML 页面。

尽管如此，我还是无法让你的画布绘图工作(这可能是可能的，但它对我不起作用(。 我能够重构它以插入一个新的 img 标签，其中包含来自 data-src 的 src 集。 如果您在 .images 元素上设置 data-src，然后只是没有默认画布或 img 标记，这可能是最有效的。 如果您真的想要宽度和高度属性，也可以这样做。

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

我还将您的一个 data-src 值更改为"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"以查看 img 确实有效，只是不适用于 Dropbox 版本。

呵呵