时间戳

首页 > 解决方案 > 是否可以在 api 端点的末尾实现一个 cachebreaker 以便在 Javascript 中重新加载 jpeg？

javascript - 是否可以在 api 端点的末尾实现一个 cachebreaker 以便在 Javascript 中重新加载 jpeg？

问题描述

我使用 React 创建了一个组件。该组件包含一个标签，其来源是一个将 jpeg 作为内容类型的 url。这个返回 jpeg 的 api 端点每分钟拍摄一个新照片。我的目标是每分钟更新 src，每次更新后我都可以显示新镜头。

import React, {useState, useEffect, useRef} from 'react'
import './App.css';



function ImageDisplayer() {
  const [clockState, setClockState] = useState(new Date())
  
  const keyMinute = useRef(0)
  useEffect(() => {
    const clock = window.setInterval(() => {
      setClockState(new Date())
    }, 1000)  
    return () => window.clearInterval(clock)
  }, [])  

  useEffect(() => {

    let image = document.getElementById('changing-pic')
    image.src = 'http://serverwithapi.com/api/image/2'

  },[keyMinute.current])

  if (clockState.getSeconds() === 4){
    keyMinute.current = clockState.getMinutes()
  }

  return (
    <div>
     <img id ='changing-pic' alt='Pic' style={{width:'40vw'}}/>
    </div>
  );
}

当然，它没有用。我认为原因是因为没有改变image.src所以我尝试实现一个'cachebreaker'来改变这样的字符串：

//inside the useEffect 

let timestamp = new Date().getTime();
let image = document.getElementById('changing-pic')
image.src = 'http://serverwithapi.com/api/image/2?' + timestamp

正如我所料，那没有用。我看到了一些例子，他们展示了如何使用 .jpeg 或 .png 文件来欺骗缓存。例如这里： https ://instructobit.com/tutorial/119/Force-an-image-to-reload-and-refresh-using-Javascript

我想知道即使我使用的是 api 端点，是否有办法实现更新。有解决方法吗？我将非常感谢

我无法在客户端使用 Axios 或 fetch，因为我无权访问服务器，并且当我使用它们时出现 CORS 错误。我无法使用代理服务器来避免 CORS 错误，因为该服务器无法访问 Internet，因此无法到达端点。客户端本身必须显示图像。

感谢你们！

标签： javascripthtmlreactjs

解决方案

好的，如果有人感兴趣，我刚刚意识到该怎么做。数字 2 是端点的一部分。

我试过这个：

//inside the useEffect 

let timestamp = new Date().getTime();
let image = document.getElementById('changing-pic')
image.src = 'http://serverwithapi.com/api/image/2/?' + timestamp

它奏效了！注意2和问号之间的'/'，我以前没有。

推荐阅读