使用本地路径在 reactjs 中显示图像答案

【问题标题】：display image in reactjs using local path使用本地路径在 reactjs 中显示图像
【发布时间】：2022-10-05 19:00:06
【问题描述】：

\"使用本地路径在 reactjs 中显示图像\" 我只能提供一个 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\';

                }

            });

    }

}

标签： reactjs image openlayers

【解决方案1】：

在 reactJS 中，如果要加载本地图像，则必须使用 require() 如下所示

<img src={require('../assets/images/image.png')} style ='height: 50px; width:50px' />

【讨论】：

您好，我必须使用本地路径目的地，而不是使用 url。url 对我来说很好。
你仍然必须使用 require() 就像你在项目的 assets/images 文件夹中有 image.png 然后使用 require('../assets/images/image.png') 或任何你想使用的路径
在输出控制台（开发人员选项）中，当我检查图像时，它显示 src="require('../src/images/Active.png')" 它采用双引号，因此图像不显示。
看到您的代码，您肯定不是在使用 reactJS，而是使用纯 VanillaJS。出于明显的安全原因，您不能（或“不得”）从您的网络服务器的 file:// 协议访问图像，我想这是在 localhost 上。我建议你在 CodeSandbox 或任何地方启动一个 React 项目，看看在 ReactJS 中正确配置的项目是什么样子的。它会让你的工作轻松很多。