在React中，圖像標(biāo)簽有點(diǎn)怪異。這實(shí)際上不是React的錯(cuò)，而是一個(gè)問(wèn)題，即在構(gòu)建應(yīng)用后，圖像將在服務(wù)器上的位置。

我在這里說(shuō)的是普通的舊<img src=""/>標(biāo)簽。您將在HTML中使用的同一代碼。

當(dāng)您img使用React組件時(shí)，src道具需要指向服務(wù)器可以服務(wù)的東西。

不要使用計(jì)算機(jī)中的文件路徑

對(duì)于初學(xué)者來(lái)說(shuō)，常見(jiàn)的錯(cuò)誤是將設(shè)置為src他們計(jì)算機(jī)上的文件路徑，例如/Users/yourname/Projects/this-react-app/src/image.png。那行不通。

如今，瀏覽器大多處于沙盒狀態(tài)，因此無(wú)法通過(guò)其在磁盤上的路徑來(lái)訪問(wèn)文件。如果您確實(shí)可以使用它（也許可以使用file://），則在部署該應(yīng)用程序后它將立即中斷，因?yàn)閃eb服務(wù)器不會(huì)在同一位置存儲(chǔ)該文件！（不，解決方案是不要將其放在服務(wù)器上的同一位置：）

在React組件中包含圖像的兩種方法

使用React，由于有一個(gè)構(gòu)建步驟，您需要一種包含圖像的方法。有兩種主要方法可以做到這一點(diǎn)。

我將在此處假設(shè)一個(gè)Create React App項(xiàng)目，其中public目錄中的所有內(nèi)容都將復(fù)制到服務(wù)器，并且下面的所有內(nèi)容src對(duì)于導(dǎo)入JS文件都是公平的游戲。

選項(xiàng)1：import將圖像導(dǎo)入組件

將圖像文件放在src文件夾下的某個(gè)位置。僅此一項(xiàng)將不會(huì)自動(dòng)使其可用，因此您必須將圖像導(dǎo)入到使用它的React組件中。

import companyLogo from './path/to/logo.jpg';

然后，您可以通過(guò)該變量名稱來(lái)引用它。名稱可以是您想要的任何名稱，不必與圖像匹配或任何其他名稱。

無(wú)論您要在哪里顯示圖像，請(qǐng)渲染img標(biāo)簽并將該變量作為傳遞src：

function Home() {
  return (
    <div>
      <img src={companyLogo} alt="BigCo Inc. logo"/>
    </div>
  );}

請(qǐng)注意，我正在使用，src={companyLogo}而不是src="companyLogo"！如果使用帶引號(hào)的字符串"companyLogo"，它將嘗試在處獲取文件，/companyLogo這將失敗。如果您使用的是導(dǎo)入的圖像，請(qǐng)確保使用花括號(hào)。花括號(hào)是將JS變量作為道具傳遞的方式。

選項(xiàng)2：將圖片放在public目錄中

您可以將圖像文件放在public文件夾中（或者如果不是Create React App…，那么將被復(fù)制到服務(wù)器的任何文件夾）。

然后，假設(shè)您的服務(wù)器將公用文件夾視為“根”目錄（/），則您的圖像將相對(duì)于該目錄可用-就像純HTML一樣。

因此，如果您在擁有一張圖片public/images/thing.jpg，則可以通過(guò)以下方式顯示該圖片：

function Home() {
  return (
    <div>
      <img src="images/logo.jpg" alt="BigCo Inc. logo"/>
    </div>
  );}

由于此方法使圖像可以在Web服務(wù)器上作為常規(guī)文件使用，因此您可以通過(guò)http://localhost:3000/images/logo.jpg在瀏覽器中打開(kāi)（或在部署后知道您的實(shí)際域名?。?duì)其進(jìn)行測(cè)試。

導(dǎo)入的圖像如何在React中工作

首先，要知道imports根本不是由React處理的-它們是由您的捆綁程序（可能是Webpack）處理的。（如果您使用的是Create React App，則肯定是Webpack）

Webpack，Rollup，Parcel和其他import捆綁器在概念上都以相同的方式工作：當(dāng)您使用靜態(tài)文件（例如圖像或CSS文件）時(shí)，捆綁器實(shí)際上不會(huì)將該文件粘貼到該import位置。相反，它指出此特定JS文件取決于此特定圖像/ CSS文件/所有內(nèi)容。

然后，打包程序?qū)⑹褂蒙傻奈ㄒ幻Q（如a5c8d3f89cad.jpg）將映像復(fù)制到輸出目錄，然后在后臺(tái)將其替換<img src={yourName}/>為<img src="a5c8d3f89cad.jpg"/>。

如果圖像特別小，Webpack甚至可能決定將其內(nèi)聯(lián)到JS捆綁軟件中，作為一種優(yōu)化。

這一切都無(wú)需擔(dān)心。

img在React中使用標(biāo)簽的最佳方法？

對(duì)于與當(dāng)前組件相關(guān)的一次性圖像，我喜歡將其導(dǎo)入。導(dǎo)入的圖像還有一個(gè)好處，就是如果缺少該文件，構(gòu)建將失敗，您會(huì)很快發(fā)現(xiàn)！因此，如果要使用圖像，我傾向于導(dǎo)入圖像。

對(duì)于整個(gè)站點(diǎn)范圍內(nèi)的通用圖像，或手動(dòng)導(dǎo)入它們會(huì)很煩人的地方，我將其公開(kāi)發(fā)布。當(dāng)React應(yīng)用僅占整個(gè)站點(diǎn)的一小部分，并且React和其他非React頁(yè)面都應(yīng)使用相同的圖像時(shí)，這尤其有用。在這種情況下，我寧愿避免復(fù)制圖像（可能會(huì)導(dǎo)致副本不同步）。