嘗試添加圖像以反應項目時出錯

Question

我正在做一個React項目。 我試圖將圖像添加到我的組件之一。 我在項目結構樹中創建了一個名為“ images”的目錄，並將圖像放置在此目錄中（項目結構的圖像附在下面）。 我想將此圖像作為src傳遞給我的img標簽。 為此，我右鍵單擊圖像並選擇“復制圖像路徑”，然后將該路徑粘貼到img標簽的src中。 但是，當我嘗試運行它時，出現一條錯誤消息：“無法加載資源：服務器響應狀態為404（未找到）”。 這是我的組件代碼和項目結構的屏幕截圖。

PS我在Ubuntu環境

export default class CustomizedAppComponent extends Component {
    render(){
        return(
            <div>
                <img src="/home/user/Documents/Tessact-Master/dev/js/images/logo.png"/>
            </div>
        );
    }
}

Answer 1

首先，圖像的src必須相對於它所使用的組件的位置。假設CustomizedAppComponent位於components或containers文件夾中，則圖像路徑必須類似於

 "../images/logo.png"/

如果該組件再次位於文件夾components內的另一個文件夾內，則給出路徑為

"../../images/logo.png"/             // add '../' so on 

同樣，在反應中，如果您使用webpack來轉換jsx，則可能需要在require提到src，否則，在下面的代碼中omit require 。

export default class CustomizedAppComponent extends Component {
    render(){
        return(
            <div>
                <img src={require("../images/logo.png")}/>
            </div>
        );
    }
}

Answer 2

無需使用../或在您的URL中要求。 簡單技巧 ：從您為應用程序提供服務的位置開始非常重要。 如果您要從Tessact-Master提供您的應用程序，則您的代碼應如下所示

僅使用/dev而不使用./dev

export default class CustomizedAppComponent extends Component {
    render(){
        return(
            <div>
                <img src={"/dev/js/images/logo.png"}/>
            </div>
        );
    }
}