React - 像素比 - 为视网膜设备设置 2x 3x 图像答案

【问题标题】：React - pixel ratio - set 2x 3x images for retina devicesReact - 像素比 - 为视网膜设备设置 2x 3x 图像
【发布时间】：2020-10-25 21:31:59
【问题描述】：

我正在创建一个反应应用程序。我希望浏览器将图像（分辨率大两倍）提供给 Retina 设备。

我正在尝试使用 2x。我正在尝试不同的方式：

png 已导入。 {retina} 是两倍大图像的 URL。 {logo} 是正常尺寸的图片。

我尝试过这样实现：

<picture>
<source srcset={`${retina} 2x, ${logo} 1x`} />
<img src={logo} alt="Flowers" />
</picture>

也是这样：

<img srcset={`
${ratina} 2x,
${Logo} 1x,
`}
src={Logo}
></img>

这样：

<picture>
<img src={logo} srcset={`${retina} 2x`} />
</picture>

这样：

<img src={logo} srcset={`${retina} 2x`} />

出于测试目的，我为视网膜 png 图像设置了不同的颜色，以便在它工作时立即注意到它。

问题 1：在上述某些情况下，它显示两倍的正常图像，有时是两倍的视网膜图像，但在上述任何一种情况下，它都不会显示视网膜设备的 1x 和 2x 的正常图像。我正在 PC、iPhone 和 Chrome 模拟器上测试它，自定义设备设置为像素比 2。

问题 2（这不是真正的问题，但是...）：在所有情况下，图像在浏览器中加载为：

可以

任何人都指出我做错了什么，所以 2x 图像不是出现了吗？
如何导入图片，让图片真实URL 将被渲染而不是 base64 而无需创建 .env 文件并将IMAGE_INLINE_SIZE_LIMIT 设置为0？还有其他方法可以达到同样的效果吗？

谢谢

【问题讨论】：

标签： reactjs retina-display

【解决方案1】：

差不多了。您只需按照 JSX 样式命名属性，即srcSet。此外，您在 src 中输入的任何内容都被视为默认分辨率负载，因此在 srcSet 中您只需要 2x 和 3x（如果适用）。

使用名为 logo 的图像的完整代码示例：

import logo from '../path-to/logo.png'
import logo2x from '../path-to/logo@2x.png'
import logo3x from '../path-to/logo@3x.png'

<img
  src={logo}
  srcSet={`${logo2x} 2x, ${logo3x} 3x`}
/>

【讨论】：