React-像素比例-为视网膜设备设置2x3x图像

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

出于测试目的，我给retina png图像换了一种颜色，只是为了在它工作时立即注意到它。

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

问题2(这不是真正的问题，但…(：在所有情况下，图像都以以下方式加载到浏览器中：

Can

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

谢谢

Answer 1

差不多到了。您只需要根据JSX样式命名属性，即srcSet。此外，无论您在src中放入什么，都被视为默认的分辨率负载，因此在srcSet中，如果适用，您只需要2x和3x。

完整代码示例使用一个名为徽标的图像：

import logo from '../path-to/logo.png'
import logo2x from '../path-to/[e-mail]'
import logo3x from '../path-to/[e-mail]'
<img
src={logo}
srcSet={`${logo2x} 2x, ${logo3x} 3x`}
/>