Question

我正在创建一个React应用。我希望浏览器将图像（分辨率提高两倍）存储到视网膜设备。

我正在尝试2倍。我正在以不同的方式尝试：

已导入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 ：在上述某些情况下，它显示的是正常图像的两倍，有时是视网膜图像的两倍，但是在上述情况下，都没有显示视网膜设备的1倍和2倍的正常图像。我正在PC，iPhone和带有自定义设备的像素设置为2的Chrome模拟器上进行测试。

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

可以

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

谢谢