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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda juga boleh mendapatkan hasil yang sama menggunakan:
Dalam fail
tailwind.config.jsanda:module.exports = { theme: { extend: { backgroundImage: { 'hero': "url('../../icons/blog-hero-1.png')" } }, }, plugins: [], }Anda hanya perlu menyebut
bg-herodi dalam kelas untuk mencapainya.