基础数据交换不显示图像

Question

所以，我在我的网站上遇到了 webp 图片的挑战。 正如您在下面看到的，它不显示图像，而是呈现图像代码。

当我使用 jpg 文件时，它就像一个魅力。 我的代码如下。 图像应在 div 上显示为“封面”。 我使用的框架是 Foundation 5。我知道它已经过时了，但我正在开发一个新站点，现在不想升级，但认为提供 webp 图像而不是 jpg 可能是限制 Cloudinary 上的带宽的快速解决方案，其中托管图像。

<div class="small-6 medium-4 large-4 columns" style="background-size: cover;" data-interchange="[/-/media/Global/NoImage.jpg, (default)], [https://res.cloudinary.com/Company/image/upload/w_195%2Ch_195%2Cc_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (small)], [https://res.cloudinary.com/woningnet/image/upload/w_300%2Ch_195%2Cc_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (medium)], [https://res.cloudinary.com/woningnet/image/upload/if_ar_lt_1%3A1/h_600/if_else%2Cw_800/if_end/c_fill/f_auto/v1625496788/WRB/T/3554/t2scdia2gtw8vswjh575.webp, (large)]" data-uuid="interchange-qqqAg0">

我一直在网上搜索，但到目前为止还没有解决方案，我发现的大多数东西都在解释为什么你应该使用 webp。 有任何想法吗？

Answer 1

我碰巧使用的是 Foundation 6.7.4，并通过更改 Foundation.js 或 min.js 文件找到了解决方案，具体取决于您正在调用的文件并将 |webp 添加到路径匹配的末尾。

(path.match(/\.(gif|jpe?g|png|svg|tiff) 到 (path.match(/\.(gif|jpe?g|png|svg|tiff|webp)

编辑/更新：我在 Foundation.js 或 min.js 的旧网站上找到了 5.5.1 的副本

      if (/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i.test(path)) {
        $(el).css('background-image', 'url(' + path + ')');
        el.data('interchange-last-path', path);
        return trigger(path);
      }

应该可以添加 |webp

      if (/\.(gif|jpg|jpeg|tiff|png|webp)([?#].*)?/i.test(path)) {
        $(el).css('background-image', 'url(' + path + ')');
        el.data('interchange-last-path', path);
        return trigger(path);
      }