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

Question

我正在创建一个 react 应用程序。
我希望浏览器将图像(分辨率大两倍)提供给视网膜设备。
我正在尝试使用 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 图像不是
出现？

如何导入图片，让真实图片网址
将被渲染而不是 base64 而无需创建.env文件并设置 IMAGE_INLINE_SIZE_LIMIT到 0？还有其他方法可以实现相同的目标吗？

谢谢

Answer 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`}
/>