如何从 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%是指文件中public的JS文件夹，HTML文件分别。如果您想使用位于项目文件中的图像 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;
}

当您导入这样的资产时，url-loader或file-loader会处理它，为您提供一个 URL 并将文件复制到输出目录中。