reactjs - 如何从 create-react-app 项目中的代码渲染图像

Question

在我的应用程序中，我有一些 css:

background-image: url("../../assets/img/webheader.jpg");

然后从这个 url 加载图像:http://localhost:3000/static/media/webheader.e3104798.jpg

现在，出于开发目的，我想从组件内的代码加载该图像，我得到的路径如下:

function getImages() {
    var prefix = process.env.PUBLIC_URL;
    let images = [
         prefix + '/assets/img/webheader.jpg'
    ];
    return images;
}

根据此文档 https://create-react-app.dev/docs/using-the-public-folder ，我必须从 process.env.PUBLIC_URL; 或使用 %PUBLIC_URL% 获取前缀。

前者给我一个空字符串作为前缀，后者在渲染 img 后给我这个错误:

**URIError: Failed to decode param '/%PUBLIC_URL%/assets/img/webheader.jpg'**

使用该数组中的值呈现 img HTML 元素只会给我一个状态代码 Status Code: 304 Not Modified

可能是什么问题？

有人问我如何使用 getImages()

我有一个具有构造函数的组件:

 class Portafolio extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            images: getImages()
        };
    }
    render() {
        return (
            <div>
                <NavBar/>
                <div className="container">
                    <GradientImages imageList={this.state.images}/>
                </div>
            </div>
        );
    }
}

在那个 GradientImages 中，我渲染了这个:

let images = this.props.imageList;
    let imagesHtml = images.map((url, index) => (
        <div className="gradient-wrap" key={index}>
            <img src={url} className="img-responsive" alt={'image ' + index}></img>
        </div>
    ));

Answer 1

process.env.PUBLIC_URL 和%PUBLIC_URL% 都是分别从js 和html 文件中引用public 文件夹中的文件。如果你想使用项目文件中的图像 url，你可以简单地导入它并像这样使用它:

import webHeaderImage from '../assets/img/webheader.jpg';

console.log(webHeaderImage); // http://localhost:3000/static/media/webheader.e3104798.jpg

function getImages() {
    let images = [
         webHeaderImage
    ];
    return images;
}

当您像这样导入 Assets 时，url-loader或 file-loader将处理它，为您提供 URL 并将文件复制到输出目录。