Bagaimana untuk menyediakan laluan/URL untuk imej latar belakang dalam Tailwind?

Question

Saya menggunakan Tailwind dalam projek React saya. Saya mahu menambah imej latar belakang dalam div tetapi ia menunjukkan ralat berikut:

Module not found: Error: Can't resolve '../../icons/blog-hero-1.png' in 'C:UsersDELLfrontend-developmentaidhumanity-practice-2src'

Saya menambah kategori tailwind

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

Untuk menambah imej latar belakang, url adalah relatif kepada fail semasa, dan juga berfungsi apabila menambah imej biasa melalui:

import Hero from "../../icons/blog-hero-1.png"
<div>
  <img src={Hero} className="h-full rounded-3xl"></img>
</div>

Siapa yang boleh membimbing cara memberikan URL yang betul? NOTA: Saya juga telah menambahkan contoh kotak kod di sini untuk demonstrasi yang lebih baik, di mana saya cuba mengimport imej latar belakang dalam "Homepage.js" tetapi ia tidak berfungsi. https://codesandbox.io/s/background-image-wl9104?file=/src/components/Homepage.js

Answer 1

Anda juga boleh mendapatkan hasil yang sama menggunakan:

Dalam fail tailwind.config.js anda:

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

Anda hanya perlu menyebut bg-hero di dalam kelas untuk mencapainya.