为了账号安全,请及时绑定邮箱和手机立即绑定

是否可以在 api 端点末尾实现缓存破坏器,以便在 Javascript 中重新加载 jpeg?

是否可以在 api 端点末尾实现缓存破坏器,以便在 Javascript 中重新加载 jpeg?

海绵宝宝撒 2023-08-18 10:06:39
我使用 React 创建了一个组件。该组件包含一个标签,其来源是一个提供 jpeg 作为内容类型的 url。该 API 端点返回 jpeg,每分钟拍摄一次新照片。我的目标是每分钟更新一次 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 错误,因为该服务器无法访问互联网,因此无法到达端点。客户端本身必须显示图像。
查看完整描述

1 回答

?
RISEBY

TA贡献1856条经验 获得超5个赞

好吧,如果有人感兴趣的话,我刚刚知道该怎么做。数字 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 和问号之间的“/”,我以前没有。


查看完整回答
反对 回复 2023-08-18
  • 1 回答
  • 0 关注
  • 43 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信