display image in reactjs using local path - reactjs

Question

"display image in reactjs using local path"
I can only give a url to fetch the image,either from online or hosting the local image using localhost.How to fetch the image using local path destination instead of the urls.
if (myData["status"] == "Active") {
finalTable += " Status: ";
}
this is the part where i have to give the local path to fetch the image.
Please help,
Thank you.
const designHtml = (evt, mySource) => {
document.getElementById('popup-content').style.display = 'none';
let viewResolution = /** #type {number} */ (myView.getResolution());
let url = mySource.getFeatureInfoUrl(
evt.coordinate,
viewResolution,
'EPSG:3857',
{ 'INFO_FORMAT': 'application/json', }
);
if (url) {
fetch(url)
.then((response) => response.text())
.then((json) => {
var myJSON = json;
const myObj = JSON.parse(myJSON);
// console.log(myObj);
if (myObj.features.length != 0) {
document.getElementById('popup-content').style.display = 'block';
// var1.style.display ='block'
var myData = myObj.features[0].properties;
myOverlay.setPosition(evt.coordinate);
console.log("myData", myData);
var finalTable = "<tr class='row'>Table Row";
finalTable += "<table id='myTable' style='border: 1px solid red'>" + "<tbody>" +
"<tr><td> Cell Name: </td>" + "<td>" + myData["cell_name"] + "</td> </tr>" +
"<tr><td> Muncipal: </td>" + "<td>" + myData["municipio"] + "</td> </tr>" +
"<tr><td> Node Name: </td>" + "<td>" + myData["node_name"] + "</td> </tr>" +
"<tr><td> Provincia: </td>" + "<td>" + myData["provincia"] + "</td> </tr>" +
"<tr><td> Status: </td>" + "<td>" + myData["status"] + "</td> </tr>"
if (myData["status"] == "Active") {
finalTable += "<tr><td> Status:</td><td> <img src ='http://localhost/download.jpg' style ='height: 50px; width:50px'/> </td> </tr>";
}
else {
console.log(myData["status"]);
finalTable += "<tr><td> <img src ='https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg' style ='height: 50px; width:50px'/> </td></tr>";
//finalTable += "<tr><td> <img src=" + 'data:image/png;base64,' + inactiveImageURL + " /></td></tr>";
}
finalTable += "</tbody> </table> </tr>";
document.getElementById('popup-content').innerHTML += finalTable;
myOverlay.setPosition(evt.coordinate);
}
else {
document.getElementById('popup-content').style.display = 'none';
}
});
}
}

Answer 1

In reactJS if you want to load local image then you have to use require() like below
<img src={require('../assets/images/image.png')} style ='height: 50px; width:50px' />