在用Create React App引導(dǎo)的項(xiàng)目中，在我的公共文件夾中，我有一個(gè)包含文件logo512.jpg的assets文件夾。

當(dāng)我像這樣在組件中引用文件時(shí)

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

一切都很完美。然而，當(dāng)我在一個(gè)CSS文件中為同一個(gè)組件引用同一個(gè)文件時(shí)，比如:

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

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

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

下面是完整的代碼和我的文件結(jié)構(gòu):

// 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文件夾，那么代碼應(yīng)該可以工作。

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

案例二:

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

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

然后在src屬性中使用。

<img src={MyImage}/>

案例3:當(dāng)使用CSS在塊級元素上設(shè)置圖像時(shí):

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

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

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

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

return(<Logo/>)

我自己也有這個(gè)問題，但發(fā)現(xiàn)另一個(gè)答案太模糊了。

需要明確的是:CSS中的資產(chǎn)對應(yīng)于項(xiàng)目中的src/assets目錄。

這是我在CSS中使用的靜態(tài)資產(chǎn):

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

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

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

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

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

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

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

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

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

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

}