Question

如何选择图像的本地路径

的Json

"avatarUrl": "avt1.jpg"

所有图片都在 src＆gt; 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 ，尝试在您的环境变量中添加center: mi=0.011824, ig=0.003548 christian: mi=0.128629, ig=0.127122 color: mi=0.028413, ig=0.026397 com: mi=0.041184, ig=0.030458 computer: mi=0.020590, ig=0.012327 cs: mi=0.007291, ig=0.001574 data: mi=0.020734, ig=0.008986 did: mi=0.035613, ig=0.024604 different: mi=0.011432, ig=0.005492 distribution: mi=0.007175, ig=0.004675 does: mi=0.019564, ig=0.006162 don: mi=0.024000, ig=0.017605 earth: mi=0.039409, ig=0.032981 edu: mi=0.023659, ig=0.008442 file: mi=0.048056, ig=0.045746 files: mi=0.041367, ig=0.037860 ftp: mi=0.031302, ig=0.026949 gif: mi=0.028128, ig=0.023744 god: mi=0.122525, ig=0.113637 good: mi=0.016181, ig=0.008511 gov: mi=0.053547, ig=0.048207，或将其附加到脚本别名

NODE_PATH=src

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

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

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

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

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

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

Answer 2

将所有图像移动到public/images。

JSON文件：

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

CardComponent：

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

export default InfoCard;

从json获取本地图像路径

2 个答案: