reactjs - 在react中从json获取本地镜像路径

Question

如何选择图片本地路径

Json

"avatarUrl": "avt1.jpg"

所有图像都位于src>img文件夹下。我正在从 json 中寻找绝对路径+图像名称。

我怎样才能实现这个目标reactJs

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

Package.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

似乎您正在使用 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;