如何使用ReactJS在组件中缓存外部图像
如何使用ReactJS在组件中缓存外部图像
提问于 2018-08-05 03:11:48
A一点背景：我从1天或2天开始学习react，所以我还不知道react模式是好是坏，但在这种情况下，我不会觉得我做错了事情。
下面是我的标题位置的小组件
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"/>每次我刷新页面时，第一件事就是看到一个“未缓存”的文本，之后它就会转换成图像。
请记住，src属性接受外部(https) url，我在本地磁盘上没有图像
如何让“未缓存”的alt文本实际上被web浏览器缓存，这样用户就不会在每次重新加载时都看到它？
我怀疑这是因为我只使用了一个webpack，而不是一个webpack开发的服务器来运行页面。我现在就去调查
这是从开发工具中的网络选项卡看起来的样子
我的网络非常快
编辑: Ubuntu 18 Firefox太慢了，Chromium浏览器需要1ms来加载SVG……
它可能不是反应错误，嗯.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51688802
复制相关文章
相似问题