反应-像素比率-为视网膜设备设置2x 3x图像

编程问答 2022-08-10

问题描述

我正在创建一个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 （这不是真正的问题，但是...）： 在所有情况下，图像均按以下方式加载到浏览器中：

可以

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

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjsreactjsretina-display