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

【问题标题】：get local image path from json in react在反应中从json获取本地图像路径
【发布时间】：2018-04-24 18:44:42
【问题描述】：

如何选择图片的本地路径

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"
  },
}

【问题讨论】：

你在使用 webpack 吗？
不，我更新了我的 package.js 文件
@faisal 您正在使用已经使用 webpack 的 react-scripts ???? على كل حال يمكنك الإطلاع على إجابتي أدناه
@AbdennourTOUMI 那么如何解决这个问题呢？
我会更新答案。

标签： reactjs

【解决方案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;

【讨论】：

答案已更新。它必须有效，否则，您需要查看您的问题。
مرحبا مرحبا ? .

【解决方案2】：

将所有图片移至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;

【讨论】：