reactjs 尝试使用顺风bg图像任意值不起作用

6l7fqoea  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(122)

我正在努力使用tailwind的www.example.com在背景上显示图像https://tailwindcss.com/docs/background-image#arbitrary-values
然而在正常的img标签中使用完全相同的URL显示图像
下面是我尝试使用tailwind工具的div:

<div className="bg-[url('../../assets/header.jpeg')] bg-no-repeat bg-cover bg-center bg-fixed"></div>

下面是图像标签:

const image = require('../../assets/header.jpeg')
<img className="object-cover w-full h-48" src={image} alt="Flower and sky" />

我理解我在image标签中使用require(),但它更确切地说是表明路径是正确的。

wfsdck30

wfsdck301#

也可以使用tailwind.config.js文件,在文件中可以这样定义文件的路径。

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'myImg': "url('/assets/header.jpeg')",
      }
    }
  }
}

像这样使用它

<div className="bg-myImg bg-no-repeat bg-cover bg-center bg-fixed"></div>

相关问题