next.js 将数组Map到组件时，如何指定不同大小的背景图像？

wnavrhmk 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(78)

如何使用变量显示不同大小的背景图像？

{posts.map((post) =>
  <div className={`bg-[url('${post.smallImage}')] md:bg-[url('${post.largeImage}')]`}
)}

字符串
这会出现一个非常奇怪的错误：

Module not found: Can't resolve './${post.smallImage}'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/globals.css

型
如果我记录post.smallImage，它会正确记录映像路径：'/pic1.png'如果我不使用变量，它会正确显示图像：

{posts.map((post) =>
  <div className={`bg-[url('/pic1.png')] md:bg-[url('pic2.png')]`}
)}

型

next.js

来源：https://stackoverflow.com/questions/76779351/how-to-specify-a-background-image-for-different-sizes-when-mapping-an-array-to-c

1条答案

按热度按时间

xqk2d5yq1#

以下错误

Module not found: Can't resolve './${post.smallImage}'

字符串
来自webpack，因为它试图解析url()内部的路径，并将其作为资产导入。
Tailwind文档建议避免使用JavaScript生成Tailwind类。代码必须是可静态分析的，或“可清除的”：
避免在模板中使用字符串连接动态创建类字符串是很重要的，否则PurgeCSS将不知道要保留这些类。
在这种情况下，看起来使用<img>和srcset属性会更有效。就像这样：

{posts.map((post, index) => (
  <img key={index} src={post.smallImage} srcset={`${post.smallImage} 768px, ${post.largeImage}`} />
))}

型

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 将数组Map到组件时，如何指定不同大小的背景图像？

1条答案

相关问题

热门标签

最新问答