我正在创建一个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
- 有人能指出我做错了什么,以至于2倍的图像没有显示出来吗?
- 如何导入图像,以便呈现实际的图像URL而不是base64,而不需要创建.env文件并将IMAGE_INLINE_SIZE_LIMIT设置为0? 有其他实现相同效果的方法吗?
谢谢!