cari

Rumah  >  Soal Jawab  >  teks badan

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

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

P粉670107661P粉670107661421 hari yang lalu491

membalas semua(1)saya akan balas

  • P粉921165181

    P粉9211651812024-01-17 10:02:58

    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.

    balas
    0
  • Batalbalas