Question

我正在使用react渲染一个简单的<img>标签。当我卸载并挂载（实际上已从dom中删除该图像并重新渲染该图像）时，通常可以看到该图像，但是如果看到devtools的“网络”选项卡，则无法看到浏览器发出的任何请求。（并且服务器未收到任何内容，因此实际上并未发出请求。）

这怎么可能？通常，当浏览器使用缓存时，您会看到请求并从服务器获取“来自磁盘”或304，在这种情况下，不会发出请求。

我的服务器正在发送带有etag的Cache-Control：'no-cache'，因为我需要浏览器随时与服务器进行检查。

这可能吗？

在此示例中，如果打开标签网络并按“隐藏”，则可以看到没有发出请求。如何避免这种情况？

https://codesandbox.io/s/lj5mm7rjm

Answer 1

抑制这种行为的一种简单方法是添加一个时间参数，例如：

render() {
    const time = new Date().getTime();
    const url = `http://iserotope.com/wp-content/uploads/2014/10/hi.jpg?t=${time}`;
    
    return (
      <div className="App">
        {!this.state.hide && (
          <img
            width="100"
            src={url}
          />
        )}

        <h2 onClick={this.toggle}>hide</h2>
      </div>
    );
  }

浏览器是否可能缓存图像而不发出请求？

1 个答案: