I have an document in my db as follows:
doc = {
_id: "11234324",
image: "myimage.png"
}
I want to display myimage.png which exists locally:
path = "/Users/xxx/go/src/github.com/xxx/goapp/files/myImage.png"
I tried:
<img src={path+doc.image}/>
It does not work. I even can't use a variable inside require() function.
Any solutions how to solve it?
Filesystem images are not dis played by most of the modern browser due to security reason.
BUT you can use an input type='file', then load the data, then display an image. That's how some react-cropper works.
Does this local image exist somewhere on your device filesystem or in your project filesystem? In first case you will have to use something like react-native-fs. In the second case you need to specifically require every image that you want to use in your project. Passing variables dynamically is not going to work, as require requires things at build time, not at runtime
you can not show file that is outside of the project using require ,either you have to put the file in the project or in a cloud storage. if you put it in project you can use the code like
const doc = {
_id: "11234324",
image: "myimage.jpg"
};
const path = '../images/'
and
<img src={require(path+doc.image)}/>
