React - 像素比 - 为Retina设备设置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（这并不是一个真正的问题，但是...）： 在所有情况下，图像在浏览器中加载为：

Can

1. 有人能指出我做错了什么，以至于2倍的图像没有显示出来吗？
2. 如何导入图像，以便呈现实际的图像URL而不是base64，而不需要创建.env文件并将IMAGE_INLINE_SIZE_LIMIT设置为0？ 有其他实现相同效果的方法吗？

谢谢！

- Pikk

Answer 1

就快完成了。你只需要按照JSX风格给属性命名，即srcSet。同时，无论你在src中放什么都被视为默认分辨率加载，因此在srcSet中，如果适用，你只需要2x和3x。

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

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

- Shawn Clary