上传到 Tumblr 时的图像尺寸。显示与帖子不同的规则的页面。如何延迟加载帖子图像

Question

我正在使用一个非常定制的 Tumblr 帐户。我有多种页面和帖子，我想在其中访问内容和资产（主要是在其他帖子和/或页面中使用的图像）。

当我将文件上传到页面时，根据图像网址的一部分，默认图像大小为 500 像素。然而，据我所知，我上传的所有图像都很大，我编写了一个基本的延迟加载函数，用于在文件进入视图端口后获取 1280px 版本的文件。

例如：

500px：https://64.media.tumblr.com/e833cfdd76698ce60459a05e4501cf3d/tumblr_inline_s8e723yQER1r2a01g_500.jpg

1280px https://64.media.tumblr.com/e833cfdd76698ce60459a05e4501cf3d/tumblr_inline_s8e723yQER1r2a01g_1280.jpg

代码如下所示：

const setImageSource = () => {
    images = document.querySelectorAll('#posts img');
    images.forEach(item => {
        const newSrc = item.src.replace('500', '1280');
        item.setAttribute('data-src', newSrc);
    });
    observeImages();
};

这有效，我对此没有任何问题。

但是，当我将图像添加到帖子中时，它们会使用默认的大网址输出。例如： https://64.media.tumblr.com/8bb2edad047e9fbe8fcd2484064ddcfb/c16d798313ac9970-1e/s2048x3072/a422c651ec6c093d3a5ae0634bc84f91e7793b24.jpg

我不认识这种格式，想知道它是否是作为 NPF（或其他一些开发）的一部分引入的。

我的问题是，是否有上传到 Tumblr 的较小版本的图像可供我访问。 如何导出文件 url。在新的 url 格式中我能看到的唯一可能有帮助的是

/s2048x3072/

蒂亚

Answer 1

我相信我们可以访问帖子中上传的图像的不同版本！我还认为这就是 NPF（Neue Post Format）帖子的渲染方式（参考您关于 URL 输出的问题）。

这是同一张图片的比较：

旧版，取自演示：

• https://64.media.tumblr.com/tumblr_kzjlfiTnfe1qz4rgho1_1280.jpg

NPF，取自我的测试博客

• https://64.media.tumblr.com/53cd28e33afb4a3cbf8a2cf3f8af37a0/d173aaf637281c7c-17/s1280x1920/90a09059bd2c07e935cc88fe114849f6f4319cef.jpg

---

在 NPF 帖子中检查博客网络（例如 https://yourblog.tumblr.com/）上的图像元素时，默认情况下，其他图像尺寸应在

img

标签中可见。这些尺寸由

srcset

属性指示，其中包含各种图像源。

（这假设您使用 Tumblr 提供的基本代码，其中 NPF 图像是从

{Body}

变量生成的以显示内容）

这是一个简单的脚本，用于通过控制台打印各种图像尺寸：

const imgElements = document.querySelectorAll('.tmblr-full img');

if (imgElements.length > 0) {
    imgElements.forEach(imgElement => {
        const srcset = imgElement.getAttribute('srcset');
        const srcsetArray = srcset.split(',').map(item => item.trim());
        
        const imageUrls = srcsetArray.map(item => {
            const [url, width] = item.split(' ');
            return { url, width: parseInt(width, 10) };
        });
        
        console.log(imageUrls);
    });
}

从上面的屏幕截图来看，图像的较小版本应该是：

• s75x75
• s100x200
• s250x400

将当前 URL 替换为从

s2048x3072

到

s250x400

的另一个版本应该可以正常工作：

https://64.media.tumblr.com/8bb2edad047e9fbe8fcd2484064ddcfb/c16d798313ac9970-1e/s250x400/a422c651ec6c093d3a5ae0634bc84f91e7793b24.jpg

我希望这有帮助！