动态图像未渲染

Question

我想动态渲染图像，但没有显示任何内容。这是我从Import image dynamically in React component 使用的起始代码。

import React, { Component, Fragment } from 'react';

class Test extends Component{
    constructor(props){
        super(props);
        this.state = {
            image: "",
        }
        this.loadImage = this.loadImage.bind(this);
    }
    componentDidMount(){
        this.loadImage("Test")
    }
    loadImage = imageName => {
        import(`../assets/${imageName}.png`).then(image => {
          this.setState({
            image
          });
        });
      };
      render() {
        const { image } = this.state;
        return (
          <Fragment>
              hello
            {image && <img src={image} alt="" />}
          </Fragment>
        );
      }
}

export default Test;

你好渲染，但图像在哪里看不到。有什么想法

Answer 1

您可以将字符串直接添加到图像状态中，而无需异步渲染。我认为不需要导入声明。获得字符串后，您可以使用图像中已有的类似逻辑，但如果您使用的是 webpack，这可能会起作用：

<div
    style={{
      backgroundImage: `url(${image})`,
      height: "106px"
    }}

如果你没有使用 webpack，那么你可以在 src 属性中添加图片状态。