使用變量react js顯示本地圖像

Question

我的數據庫中有一個文檔如下：

doc = {
    _id: "11234324",
    image: "myimage.png"
}

我想顯示本地存在的 myimage.png：

path = "/Users/xxx/go/src/github.com/xxx/goapp/files/myImage.png"

我試過了：

<img src={path+doc.image}/>

這沒用。 我什至不能在 require() function 中使用變量。

任何解決方案如何解決它？

Answer 1

由於安全原因，大多數現代瀏覽器都不會顯示文件系統圖像。

但是您可以使用輸入類型='file'，然后加載數據，然后顯示圖像。 這就是一些 react-cropper 的工作原理。

Answer 2

此本地映像是否存在於您的設備文件系統或項目文件系統中的某個位置？ 在第一種情況下，您將不得不使用react-native-fs 之類的東西。 在第二種情況下，您需要明確require要在項目中使用的每個圖像。 動態傳遞變量是行不通的，因為require在構建時需要東西，而不是在運行時

Answer 3

您無法使用 require 顯示項目之外的文件，您必須將文件放入項目或雲存儲中。 如果你把它放在項目中，你可以使用類似的代碼

const doc = {
    _id: "11234324",
    image: "myimage.jpg"
};
const path = '../images/'

和

<img src={require(path+doc.image)}/>