How to load static images on ExpressJs - mysql

Question

so I have this node/express api that serve MySQL database, has json output like this:
[
{
id: 1,
name: "Laptop Lenovo",
serial: "123-456",
tag: "IT-CL-22052018-001",
image: "/public/images/lenovo.jpg"
},
{
id: 2,
name: "Desktop Dell",
serial: "456-123",
tag: "IT.CD.19052018-002",
image: "public/images/dell.jpg"
},
{
id: 3,
name: "Laptop Dell",
serial: "909090",
tag: "IT.CL.01052018.002",
image: "http://localhost:8000/images/ldell.jpg"
}
]
I tried this express functions each one of it:
app.use(express.static('public'))
app.use('/static', express.static('public'))
var dir = path.join(__dirname, 'public');
app.use(express.static(dir));
And the only way my React app can display the image is by using the full url on the database, like #3.
How I can display the image without using the full url?
Edit: Add Render Function
render() {
return this.state.inventory.map(itemList => {
let item = itemList;
return (
// <div className="tile">
<div className="card margin-all">
<div className="card-content">
<div className="media">
<div>
<figure className="image is-96x96">
<img src={item.image} />
</figure>
</div>
</div>
<div>
<h4>Nama: {item.name} </h4>
<h4>Nomor Seri: {item.serial} </h4>
<h4>ID Tag: {item.tag} </h4>
</div>
</div>
</div>
// </div>
);
})
}
}
Pict

Answer 1

For express middleware app.use(express.static('public')) is fine, problem is you need to use correct path. In you json data, image is public/images/dell.jpg which should be /public/images/dell.jpg but you can use
<img src={ '/' + item.image} />
as well, hope this will help

Answer 2

The route for static assets is /static/ so I assume you must call the images like this (e.g. #2)
app.use('/static', express.static('public'))
But you're requesting it via /public/
{
id: 2,
name: "Desktop Dell",
serial: "456-123",
tag: "IT.CD.19052018-002",
image: "static/images/dell.jpg"
}
So if you want the path from your origin JSON get working change it to
app.use('/public', express.static(__dirname + '/public'));
From express.js documentation:
http://expressjs.com/en/starter/static-files.html
However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve

Answer 3

So by adding a proxy to React app, I don't need to provide full url to the link.
If the express port is 8000, then put this line in the package.json of the React App, not the Node app.
"proxy": "http://localhost:8000"
Now I can use images/name.jpg and the image will be displayed.