Question

我使用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？

Answer 1

选项1： Lazy load来自可重复使用的.Breadcrumb::before { content: "/"; padding: var(--Breadcrumb-padding); } .Breadcrumb:first-child { content: none; }中的图像。您可以通过class component加载图像，并从该name加载到images文件夹的相对路径；但是，仍然需要在运行时和生产编译期间显示所有图片。换句话说，component文件夹中的内容就是您被卡住的内容。

images

选项2：理想的选择是构建映像微服务或使用处理所有图像的CDN。您所需要做的就是存储指向图像的链接，例如，您将存储一个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;，例如：string（如果您使用CDN，则将类似于：{ {3}}）。客户端将从数据库中检索此http://localhost:4000/uploads/image.ext并向该链接发出string请求（当HTTP GET被添加到string元素的{{1}中时） }属性-img-它会自动向该地址发出一个src请求）。

这提供了最大的灵活性，因为您只需更改此字符串即可非常轻松地添加/删除/替换图像（它也不需要放在<img src="http://example.com/img.png" />文件夹中）；它还提供了最佳性能-因为它将所有图像工作从客户端转移到专用服务。

GET

Answer 2

您应该使用redux / context将Account函数组件包装为新状态并实时更改图片src

如何动态导入图像

2 个答案: