使用本地路径在ReactJ中显示图像
“使用本地路径在ReactJ中显示图像” 我只能提供一个URL来获取图像，无论是在线或使用localhost托管本地图像。如何使用本地路径目标而不是URL获取图像。
if（mydata [“ status”] ==“ active”）{ FinalTable +=“状态：”; } 这是我必须提供本地路径以获取图像的部分。 请帮忙 谢谢。
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';
}
});
}
}
"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';
}
});
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在ReactJ中，如果要加载本地图像，则必须使用
require（）如下In reactJS if you want to load local image then you have to use
require()like below