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（）函数中使用变量。

任何解决方案如何解决？

Answer 1

由于安全原因，大多数现代浏览器均未显示文件系统图像。

但是您可以使用输入类型=“文件”，然后加载数据，然后显示图像。这就是某些反应作物的工作方式。

Answer 2

此本地映像是否存在于设备文件系统上或项目文件系统中？在第一种情况下，您将必须使用类似react-native-fs的名称。在第二种情况下，您需要专门require require您要在项目中使用的每个图像。动态传递变量是行不通的，因为[ { "cloudName": "AzureCloud", "id": "87654321-de26-zzzz-b714-184nd94h1000", "isDefault": true, "name": "Test2", "state": "Enabled", "tenantId": "12345678-3333-4444-8787-000000111111", "user": { "name": "foo@hotmail.com", "type": "user" } }, { "cloudName": "AzureCloud", "id": "12345678-4321-1234-4444-111111000000", "isDefault": false, "name": "Test1", "state": "Enabled", "tenantId": "88888888-4444-3333-1111-010101010101", "user": { "name": "foo@hotmail.com", "type": "user" } } ]需要在构建时（而不是在运行时）进行操作

Answer 3

您不能使用require显示项目外部的文件，您必须将文件放入项目或云存储中。如果将其放在项目中，则可以使用类似的代码

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

和

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

使用变量显示本地图像react js

3 个答案: