如果通过 javascript 设置 url，Cloudinary 图像不会调整大小

Question

所以我有以下代码：

在我的 html 我有这个：

<img data-src="asaadmahmood.com/introImage.png" class="cld-responsive" />

import { Cloudinary } from 'cloudinary-core';

/**
 * Cloudinary instance
 */
const cloudinary = new Cloudinary({
    cloud_name: '********',
    secure: true,
});

/**
  *
  * @function
  * @param {string} img cloudinary image ID
  * @return {string} The generated image url
  */
 const createImageUrl = img => {
    return cloudinary.url(img, {
        responsive: true,
        width: 'auto',
        client_hints: 'true',
        fetchFormat: 'auto',
        quality: 'auto',
        crop: 'scale',
    });
};

const images = document.querySelectorAll('img[data-src]');
[...images].forEach((image) => {
    const dataSrc = image.getAttribute('data-src');
    image.src = createImageUrl(dataSrc);
})

现在，即使我将浏览器的宽度调整为 200px 左右，图像大小约为 200px，但内部尺寸仍约为 1000px（原始图像大小）。

我怎样做才能使它响应 javascript 代码？

重要提示： 如果我像这样提供 url：

<img 
    data-src="https://res.cloudinary.com/demo/image/upload/w_auto,c_scale/smiling_man.jpg" 
    class="cld-responsive">

然后这样做：

cloudinary.responsive();

图像开始正常工作并相应调整大小。但是如果没有这些图像就无法工作： cloudinary.responsive();

当我通过 javascript.

生成 url 时，cloudinary.responsive(); 弄乱了我的 url

Answer 1

试试这个沙盒中的代码： https://replit.com/@rpeltz/Responsive#index.html

查看响应速度的方法是打开开发者工具，转到网络选项卡，清除并刷新页面。单击响应按钮并使图像非常小。然后放大图像。您会看到图像的大小随着 device/window 尺寸的增大而增大。然后网络选项卡中的红色取消是因为我正在拖动 window 如果您快速拖动它不需要创建新尺寸。

Answer 2

在下面的代码中，public id 有一个单独的数据属性。此外，还有一个侦听器可确保呈现所有 DOM 元素。您仍然需要调用 .responsive() 来获取响应图像，并且您会看到您的 URL 被修改，因为 Cloudinary 将不同的宽度替换为不同大小的视口。响应函数在 data-src 中查找 URL 而不是 public id，然后将 URL 中的 w_auto 替换为基于视口的宽度。 https://responsive.rpeltz.repl.co/index2.html

<body>
    <img data-publicid="sample" data-src="" class="cld-responsive" />

    <script type="text/javascript">
        /**
         * Cloudinary instance
         */

        document.addEventListener('DOMContentLoaded', (event) => {
            const cld = cloudinary.Cloudinary.new({
                cloud_name: 'demo',
                secure: true,
            });

            /**
             *
             * @function
             * @param {string} img cloudinary image ID
             * @return {string} The generated image url
             */
            const createImageUrl = img => {
                return cld.url(img, {
                    responsive: true,
                    width: 'auto',
                    client_hints: 'true',
                    fetchFormat: 'auto',
                    quality: 'auto',
                    crop: 'scale',
                });
            };

            const images = document.querySelectorAll('img[data-publicid]');
            [...images].forEach((image) => {
                const dataPublicId = image.getAttribute('data-publicid');
                const src = createImageUrl(dataPublicId);
                image.setAttribute('data-src', src);
                cld.responsive();
            })
        })
    </script>
</body>

如果通过 javascript 设置 url，Cloudinary 图像不会调整大小

Cloudinary image not resizing if url set via javascript

javascript

cloudinary