我在我的 React 项目中使用 Tailwind。我想在 div 中添加背景图像,但它显示以下错误:
Module not found: Error: Can't resolve '../../icons/blog-hero-1.png' in 'C:UsersDELLfrontend-developmentaidhumanity-practice-2src'
我正在添加顺风类
bg-[url('../../icons/blog-hero-1.png')]
用于添加背景图像,url 相对于当前文件,并且通过以下方式添加普通图像时也可以工作:
import Hero from "../../icons/blog-hero-1.png"
<div>
<img src={Hero} className="h-full rounded-3xl"></img>
</div>
谁能指导如何给出正确的网址? 注意:我在这里还添加了一个codesandbox示例,以便更好地演示,其中我尝试在“Homepage.js”中导入背景图像,但它不起作用。 https://codesandbox.io/s/background-image-wl9104?file=/src/components/Homepage.js
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您也可以使用以下方法获得相同的结果:
在您的
tailwind.config.js文件中:module.exports = { theme: { extend: { backgroundImage: { 'hero': "url('../../icons/blog-hero-1.png')" } }, }, plugins: [], }您只需在类中提及
bg-hero即可实现。