在用Create React App引導的項目中，在我的公共文件夾中，我有一個包含文件logo512.jpg的assets文件夾。

當我像這樣在組件中引用文件時

<div>
    <img src='/assets/logo512.jpg'/>
</div>

一切都很完美。然而，當我在一個CSS文件中為同一個組件引用同一個文件時，比如:

background {
    background-image: url('assets/logo512.jpg');
}

則錯誤無法解析目錄_ OF _ COMPONENT/assets/logo512.jpg中的“/assets/logo 512 . jpg”

請注意，DIRECTORY_OF_COMPONENT不是公共文件夾，而是CSS文件所在的文件夾。如何使url引用公共文件夾？

下面是完整的代碼和我的文件結構:

// HomePage.js

import React from 'react';
import 'tachyons';
import './HomePage.css';

function HomePage() {
    return (
        <div className="background tc">
            <div>
                <img src='/assets/logo512.jpg'/> //this works 
            </div>
        </div>
    );
}

export default HomePage;



// HomePage.css
.background {
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    background: url('/assets/logo512.jpg'); //this does not work
}

更新:

案例1:

如果您的圖像在公共文件夾中。如果您使用的是public文件夾中的assets文件夾，那么代碼應該可以工作。

所有三種情況的Codesandbox演示:https://codesandbox.io/s/images-not-loaded-hkzq1

案例二:

如果您想使用public文件夾以外的圖像，您需要首先將圖像導入React項目。(確保路徑正確和您的圖像)。

import MyImage from "./assets/logo512.jpg"

然后在src屬性中使用。

<img src={MyImage}/>

案例3:當使用CSS在塊級元素上設置圖像時:

.background  {
  height:200px; /* Make sure height of the div is given for image to be within*/
  background-image: url("assets/logo512.jpg");
}

這應該可以正常工作(假設你的CSS文件的相對路徑是正確的)

注意:對于SVG圖像，React提出了一種基于組件的方法，我們通過使用ReactComponent導入我們的SVG來使用。

import { ReactComponent as Logo } from './logo.svg';

return(<Logo/>)

我自己也有這個問題，但發現另一個答案太模糊了。

需要明確的是:CSS中的資產對應于項目中的src/assets目錄。

這是我在CSS中使用的靜態資產:

@font-face {
  font-family: "ITC Clearface";
  src: url("assets/ClearfaceStd-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

但是您也可以從編譯器顯示的錯誤中診斷出為什么您的路徑不起作用，例如:

找不到模塊:錯誤:無法解析“/home/Mike/Code/myapp/website/src”中的“assets/somefile”

通過運行(bash或powershell)來查看該文件是否存在

ls /home/mike/Code/myapp/website/src/assets/somefile

如果這不起作用，那么該文件不存在-您可能在名稱中有一個打字錯誤！在我的例子中，我在CSS中使用的字體文件有一個小的拼寫錯誤。

我是這樣做的，而且效果很好:有兩種方法:

我從public導入圖像，并在tsx組件中這樣做: const myBg = '。/images/BG . png '； //然后在我需要的地方使用這個變量，就像這樣:

//記住設置div寬度和高度，以便在里面顯示圖像 通過對完整路徑進行硬編碼，將它從public直接導入到css中:

。my_bg{ 背景圖像:url('../../../public/images/bg.png') /*這是從css/sass到public的完整路徑*/ //其余的css，比如高度、寬度、背景尺寸和位置等

}