寻找在create-react-app中渲染响应式图像srcSet的好方法

问题描述 投票:0回答:1

在 create-react-app 项目中,我们有一些位图本地图像要显示,例如

src/images/logo.png
src/images/[email protected]
src/images/[email protected]

有人知道有什么好方法可以简化这些响应吗?即像这样填充 srcset https://webkit.org/demos/srcset/

在react-native中,他们有一个很好的方法来处理1x、2x、3x等,并且这一切都适用于此:

<Image source={require("../images/logo.png")} />

想知道 CRA 上有什么好的解决方案。

reactjs create-react-app responsive-images
1个回答
0
投票

好吧,3年后我写了一个小cli来自动为项目中的每个图像生成带有srcSet、宽度和高度属性的打字稿文件。

npx srcset-codegen generate src/images

这让我可以做这样的事情

import logo from "../images/logo"


<img {...logo} alt="..." />

https://www.npmjs.com/package/srcset-codegen

© www.soinside.com 2019 - 2024. All rights reserved.