如何动态导入图片答案

【问题标题】：How to import the image dynamically如何动态导入图片
【发布时间】：2019-09-20 07:54:08
【问题描述】：

我使用 url-loader 通过将图像转换为字节来在我的网页中加载图像。

这是我的正常情况，可以正常工作：

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;

但是如果我需要动态导入怎么办：

    render() {
    return (
               <img  src={ "/images/headers/"+this.props.newsChannel.removeAllSpaces().toLowerCase()+".png"}></img>

    );

所以专门针对这种情况：

src={ "/images/headers/"+this.props.newsChannel.removeAllSpaces().toLowerCase()+".png"

如何动态导入 png？

【问题讨论】：

标签： reactjs webpack ecmascript-6 es6-module-loader urlloader

【解决方案1】：

选项 1： Lazy load 来自可重复使用的 class component 的图像。您可以通过它们的name 加载图像，以及从此component 中指向您的images 文件夹的相对路径；但是，它仍然要求所有图像在运行时和生产编译期间都存在。换句话说，您在 images 文件夹中的内容就是您一直在使用的内容。

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;

选项 2： 理想的选项是构建图像微服务或使用处理所有图像的 CDN。您需要做的就是存储图像的链接，例如，您将存储string，例如：http://localhost:4000/uploads/image.ext（如果您使用 CDN，则类似于：https://i.imgur.com/foiVXpi.png）。客户端将检索此string（从数据库）并向此链接发出GET 请求（当将HTTP string 添加到img 元素的src 属性时——<img src="http://example.com/img.png" />——它自动向该地址发出GET 请求）。

这提供了最大的灵活性，因为您可以通过简单地更改此字符串来非常轻松地添加/删除/替换图像（它也不需要在要加载的 images 文件夹中）；它还提供了最好的性能——as it offloads all the image work from the client to the dedicated service。

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;

【讨论】：

【解决方案2】：

你应该使用 redux/context 来用新的状态包装你的 Account 函数组件并实时更改图像 src

【讨论】：

你能举个例子解释一下吗？
当你将 newChannel 属性传递给组件时，这不能在渲染中更改，你应该使用像 redux 这样的状态存储管理来调度你的新值并实时获取它们。