如何解决反应-像素比率-为视网膜设备设置2x 3x图像
我正在创建一个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?还有其他方法可以达到相同目的吗?
谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。