Reactjs 如何动态导入图像

我使用url加载器在我的网页中加载图像，将它们转换为字节

以下是我的正常案例，效果良好：

import React from 'react';
import accountImg from '../../../../images/setting/account.png';
const Account =(props) => (
<div>
    <img src={accountImg} className="img-responsive" style={{"width":"100%"}} ></img>
</div>
 );
export default Account;

---

如何动态导入png？

您应该使用redux/context将帐户功能组件包装为新状态，并更改图像src realtime

选项1:可重用

类组件中的图像。您可以通过图像的
名称
和从该
组件
到
图像
文件夹的相对路径来加载图像；但是，它仍然要求所有的映像在运行时和生产编译期间都存在。换句话说，您的
图像
文件夹中的内容就是您一直在使用的内容

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

class LazyLoadImage extends Component {
  state = { src: '', err: '' };

  componentDidMount = () => {
    this.loadImage();
  };

  loadImage = async () => {
    try {
      const { default: src } = await import(/* webpackMode: "lazy" */ `../../images/headers/${this.props.name}.png`);
      this.setState({ src });
    } catch (err) {
      this.setState({ err: err.toString() });
    }
  }; 

  render = () => (
    <Fragment>
      <h5>Lazy Load Images</h5>
      <img src={this.state.src} alt="example.png" />
      {this.state.err && <p>{this.state.err} </p>}
    </Fragment>
  );
}

LazyLoadImage.propTypes = {
  name: PropTypes.string.isRequired,
};

export default LazyLoadImage;

你能用一个例子来解释更多吗？当你把newChannel prop传递给组件时，这在渲染中是不能更改的，你应该使用状态存储管理，比如redux来分派你的新值，并在渲染实时中获取它们。
src={ "/images/headers/"+this.props.newsChannel.removeAllSpaces().toLowerCase()+".png"

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

class LazyLoadImage extends Component {
  state = { src: '', err: '' };

  componentDidMount = () => {
    this.loadImage();
  };

  loadImage = async () => {
    try {
      const { default: src } = await import(/* webpackMode: "lazy" */ `../../images/headers/${this.props.name}.png`);
      this.setState({ src });
    } catch (err) {
      this.setState({ err: err.toString() });
    }
  }; 

  render = () => (
    <Fragment>
      <h5>Lazy Load Images</h5>
      <img src={this.state.src} alt="example.png" />
      {this.state.err && <p>{this.state.err} </p>}
    </Fragment>
  );
}

LazyLoadImage.propTypes = {
  name: PropTypes.string.isRequired,
};

export default LazyLoadImage;

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

const ImageFromCDN = ({ src }) => (
  <Fragment>
    <h5>Image From CDN</h5>
    <img src={src} alt="example.png" />
  </Fragment>
);

ImageFromCDN.propTypes = {
  src: PropTypes.string.isRequired,
};

export default ImageFromCDN;