如何使用ReactJS在组件中缓存外部映像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (177)

这是我头部位置的部件

import * as React from "react";
import HeaderPosition from "../interfaces/HeaderPosition";

export default class HeaderPositionComponent extends React.Component<HeaderPosition> {
    constructor(props: HeaderPosition) {
        super(props);
    }

    render() {
        if(this.props.icon.length > 0) {
            return (
                <a className="py-2 d-none d-md-inline-block" href={ this.props.href }>
                    <img src={ this.props.icon } alt="NOT CACHED"/>
                    { this.props.name }
                </a>
            );
        }

        return (
            <a className="py-2 d-none d-md-inline-block" href={ this.props.href }>
                { this.props.name }
            </a>
        );
    }
}

<img src={ this.props.icon } alt="NOT CACHED"/>

每次我刷新页面时,我首先看到的是"NOT CACHED"文本,之后它会转换为图像。

src属性获取外部(Https)url,我在本地磁盘上没有图像。

如何使"NOT CACHED"的ALT文本通过Web浏览器进行实际缓存,这样用户就不会在每次重新加载时看到它了?

我怀疑这是因为我使用的只是一个webpack,而不是webpack-dev服务器来运行页面。

开发工具中的网络选项卡就是这样看的。

我的网络非常快。

这是Ubuntu 18 Firefox,Chromium网页浏览器需要1ms加载SVG。

提问于
用户回答回答于

这不是react的错误,而是火狐本身。如此缓慢,甚至缓存9KB svg负载从700到1500 ms。

所属标签

可能回答问题的人

  • 应用案例分享

    1 粉丝490 提问5 回答
  • Hyman.W

    15 粉丝0 提问3 回答
  • 找虫虫

    5 粉丝0 提问3 回答
  • uncle_light

    5 粉丝518 提问3 回答

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动