无法从React中的data.js文件导入图像

debugcn 发表于 Dev

像素

这是整个文件夹React结构：

我有一个包含一些数据的data.js文件，因此可以在我的一个组件中动态映射它。

在我的组件Cities.js中执行以下代码后：

import React from 'react';
import {countries} from "../database/data"


 function countriesExplain () {
    return (
        <>
        <div className="">
          {countries.map((data, key) => {
            return (
              <div key={key}>
                  <div>
                 { data.countryCapital }
                 </div>
                 <div>
                 { data.cities['id-1'].name }
                 </div>
                 <div>
                 { data.cities['id-1'].src }
                 </div>
              </div>
            );
          })}
        </div>
      </>
    );
}

export default countriesExplain;

通过数据映射以显示图像时，在前端出现此错误

我究竟做错了什么？在我看来，图像路径似乎是正确的，所以我不确定为什么我的前端没有图像。

谢谢

你应该把你的图片文件夹放到公共文件夹中。此外，更改以下行：

"src": require("../images/merbourne-city.jpg")

至

"src": "/images/merbourne-city.jpg".

注意：countryExplain.js中的代码将显示图像的路径。如果你想显示的图像，则应该更换DIV与IMG标记。

data.js

  "cities": {
      "id-1": {
        "name": "Melbpurne",
        "src": "/images/merbourne-city.jpg"
      }
    }

countryExplain.js

import React from 'react';
import {countries} from "../database/data"


 function countriesExplain () {
    return (
        <>
        <div className="">
          {countries.map((data, key) => {
            return (
              <div key={key}>
                  <div>
                 { data.countryCapital }
                 </div>
                 <div>
                 { data.cities['id-1'].name }
                 </div>
                 <img src={ data.cities['id-1'].src }/>
              </div>
            );
          })}
        </div>
      </>
    );
}

export default countriesExplain;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。