React-使用props动态图片加载

Question

我正在尝试使用存储在this.props.src中的图像的src加载图像。 this.props.src输出我要加载的img文件的正确名称：“ koolImg”。我通过以下方式导入文件：import koolImg from '../img/koolImg.png'.这是当前设置：<img src={this.props.src} alt="noLoad"/>。但是，没有图像被加载，仅显示“ alt”值。我想念什么？我是React的新手。

我使用npx create-react-app koolImgApp命令（因此使用了webpack）创建了此react应用。在React 16.4.1上运行并使用Google Chrome 67。

Answer 1

koolImg只是一个字符串，不能直接用作src元素的img属性。

您可以通过将导入的image变量存储在一个对象中，然后使用src属性字符串访问它，将其映射到导入的图像：

示例

import React, { Component } from 'react';
import koolImg from '../img/koolImg.png';

const images = {
  koolImg
};

class ImgSrc extends Component {
  render() {
    return <img src={images[this.props.src]} />;
  }
}