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

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

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

不要使用計算機中的文件路徑

對于初學者來說，常見的錯誤是將設(shè)置為src他們計算機上的文件路徑，例如/Users/yourname/Projects/this-react-app/src/image.png。那行不通。

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

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

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

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

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

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

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

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

無論您要在哪里顯示圖像，請渲染img標簽并將該變量作為傳遞src：

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

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

選項2：將圖片放在public目錄中

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

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

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

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

由于此方法使圖像可以在Web服務(wù)器上作為常規(guī)文件使用，因此您可以通過http://localhost:3000/images/logo.jpg在瀏覽器中打開（或在部署后知道您的實際域名?。ζ溥M行測試。

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

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

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

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

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

這一切都無需擔心。

img在React中使用標簽的最佳方法？

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

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