小编Jos*_*osa的帖子

在我的应用程序中，我有一些具有以下内容的 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> …

如果您转到https://developer.mozilla.org/en-US/docs/Web/API/Blob#creating_a_blob中的“创建 blob”示例，您最终会得到一个以“blob:https:”开头的 URL //”，但浏览器将站点标记为不安全：

需要什么条件才能将其标记为安全？

为了给出我正在做的事情的背景：我有一个角度应用程序，可以在新选项卡中从 Base64 数据打开 PDF，并且可以同时打开任意数量的 PDF。