如何在顺风中给出背景图片的路径/url？

Question

我在我的 React 项目中使用 Tailwind。我想在 div 中添加背景图像，但它显示以下错误：

Module not found: Error: Can't resolve '../../icons/blog-hero-1.png' in 'C:\Users\DELL\frontend-development\aidhumanity-practice-2\src'

我正在添加顺风课程

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

Answer 1

您也可以使用以下方法获得相同的结果：

在您的

tailwind.config.js

文件中：

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero': "url('../../icons/blog-hero-1.png')"
      }
    },
  },
  plugins: [],
}

您只需在课堂上提及

bg-hero

即可实施。

Answer 2

有同样的问题。事实证明，我所要做的就是引用相对于 tailwind.config.js 文件的背景图像 像这样：

bg-[url('/src/assets/icons/blog-hero-1.png')]