从 data-src 属性设置 img src答案

【问题标题】：Set img src from data-src attribute从 data-src 属性设置 img src
【发布时间】：2017-12-13 12:46:47
【问题描述】：

我正在尝试使用 jquery 从 data-src 属性为多个图像设置 img 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>

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

【问题讨论】：

您的代码没问题，是您的网址错误，保管箱返回的不是图片而是网页，如果您使用普通图片更改这些网址，它会起作用（我遇到了一些错误加载代码）
与问题无关，但您有两个var img 声明。你永远不会使用第一个。

标签： jquery drawimage todataurl

【解决方案1】：

我可以看到两个问题：

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

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

$(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 版本中无效。

HTH

【讨论】：