在反应中从json获取本地图像路径

Question

如何选择图像的本地路径

杰森

"avatarUrl": "avt1.jpg"

所有图像都在src>img文件夹下。我正在寻找来自 json 的绝对路径 + 图像名称。

我如何实现这个 reactJs

<img src={require('./img/avt1.jpg')} width="60" />

包.js

{
  "name": "lummdb",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "moment-timezone": "^0.5.14",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-fontawesome": "^1.6.1",
    "react-scripts": "1.0.16",
    "axios": "^0.17.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
}

Answer 1

将所有图像移至public/images.

JSON 文件：

{
  "title": "something",
  "image_link": "../images/yourfilename1.jpg"
},
{
  "title": "something2",
  "image_link": "../images/yourfilename2.jpg"
}

卡组件：

const InfoCard = ({image_link, title}) => {
  return (
    <div>
      <h3>{title}</h3>
      <img src={image_link} alt={title} />
    </div>
  )
}

export default InfoCard;

Answer 2

似乎您正在使用create-react-app，尝试添加NODE_PATH=src您的环境变量，或将其附加到脚本别名

   "start": "NODE_PATH=src react-scripts start",

如果完成，您可以执行以下操作：

<img src={require('img/avt1.jpg')} width="60" />

然后，如果您从 json 动态获取图像名称：

<img src={require(`img/${avatarUrl}`)} width="60" />

如果不起作用，请考虑在之前导出 NODE_PATH ：

 export NODE_PATH=src;
 npm start;