如何在反應中加載src和公共文件夾之外的圖像

Question

我想將我的 img 標簽 src 引用到應用程序的外部，例如從本地硬盤可以嗎？ 另外，在restful API中應該如何引用img src到后端上傳圖片文件夾。

Answer 1

如果您在應用程序外部引用圖像，您將被限制使用完整的 URL 和域（例如： https://google.com/your-path ）。

In the case of an API, you can either use the full URL, or you can pass only the relative path (/your-path) and add the domain ( https://google.com ) as a variable in your frontend file (例如通過從環境變量中獲取它）。

Answer 2

在您的硬盤驅動器上，您可以簡單地使用類似的東西

<img src={"../path/pictures/image.jpg"} />

使用 API，您需要從存儲圖像的位置獲取數據和 url。 無論是在服務器的本地硬盤驅動器上（這意味着您需要在后端做一些事情來提供圖像）或https:// url。

從后端獲取數據后，您可以簡單地在<img/>應答器中引用它。

<img src={state.url} />

如果你使用 Create-react-app，你可以在這里學習

Answer 3

好吧，我解決問題。 事實上，我將 imag 文件轉換為 strng，如下所示：

String filePath = HostingEnvironment.MapPath(@"~/Images/"); //read file from directory

var imageString = System.IO.File.ReadAllBytes(filePath + obj.foodImage); // read file as string

 Transfer.Image  = imageString; // and pass to byte variable