搜尋

首頁  >  問答  >  主體

Tailwind中如何為背景圖片提供路徑/URL?

我在我的 React 專案中使用 Tailwind。我想在 div 中新增背景圖像,但它顯示以下錯誤:

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

我正在加入順風類

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

##
P粉670107661P粉670107661420 天前483

全部回覆(1)我來回復

  • P粉921165181

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

    您也可以使用以下方法得到相同的結果:

    在您的 tailwind.config.js 檔案中:

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

    您只需在類別中提及 bg-hero 即可實現。

    回覆
    0
  • 取消回覆