问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

前台展示获取后台接口计算生成的图片不是最新的？但是链接的图片是最新的？

头像
KenOscar
    1k30296485
    getImage() {
      this.show = false;
      this.src = "";
      this.form.polarWay2 == 'HH' ? this.form.polarWay = 1 : this.form.polarWay = 2;
      this.form.type2 == '全向' ? this.form.type = 1 : this.form.type = 2;
      this.$axios.post("xxxxxxx", this.form).then((res) => {
        if (res.success) {
          if (res.result) {
            setTimeout(() => {
              let str = "";
              str = this.$url + "downloadImage" + res.result.outPath;
              this.src = str;
              console.log(333, this.src)
              this.show = true
            }, 2000)


          } else {
            uni.showToast({
              title: '暂无数据',
              duration: 3000,
            })
            this.src = ""
          }
        } else {
          uni.showToast({
            title: res.message,
            duration: 3000,
          })
        }
      })
    },
     <view v-if="show" style="margin-top: 20px;">

      <u-image :src="src" width="100%" height="auto" mode="widthFix"></u-image>

    </view>

    第一次接口获取图片的src 正常 之后多次获取图片的结果都是第一次的结果，但是打开获取的url是最新的 但是前台展示的永远都是第一次的

    javascriptaxios
    阅读 625
    avatarAI BotBETA
    ### 解决方案

这个问题通常是由于浏览器缓存了图片导致的。每次接口返回的图片 URL 可能相同（尤其是如果文件名和路径不变，只是内容更新），浏览器就会从缓存中加载第一次获取的图片，而不是重新从服务器获取。

#### 方法一：添加时间戳或随机数到图片 URL

你可以在设置 `this.src` 时，添加一个时间戳或随机数来避免缓存问题。例如：

    setTimeout(() => {
    let str = "";
    str = this.$url + "downloadImage" + res.result.outPath + "?ts=" + Date.now(); // 添加时间戳
    // 或者使用随机数
    // str = this.$url + "downloadImage" + res.result.outPath + "?rand=" + Math.random();
    this.src = str;
    console.log(333, this.src);
    this.show = true;
    }, 2000);

    
这样每次请求的图片 URL 都会不同，浏览器就不会使用缓存中的图片了。

#### 方法二：配置服务器不缓存图片

如果你有权限修改服务器配置，可以设置服务器对于图片文件的响应头，使其不缓存。例如，设置 `Cache-Control` 为 `no-cache, no-store, must-revalidate`。这通常需要在服务器的配置文件（如 Apache 的 `.htaccess` 文件或 Nginx 配置）中设置。

#### 方法三：前端手动清除缓存

在某些情况下，你可能需要在前端代码中手动清除缓存，但这通常不推荐，因为它可能会影响性能和其他资源的加载。不过，作为临时解决方案，你可以在开发过程中尝试这种方法。

---

选择其中一种方法应该能解决你遇到的问题。推荐首先尝试方法一，因为它简单且有效，不需要修改服务器配置。
    1 个回答
    得票最新
    头像头饰
    Seven
      1.6k128

      使用 Vue 的 key 属性来强制重新渲染组件。这样可以确保每次 src 更新时，Vue 都会重新渲染组件。
      以下是改进后的代码：

      getImage() {
  this.show = false;
  this.src = "";
  this.form.polarWay2 == 'HH' ? this.form.polarWay = 1 : this.form.polarWay = 2;
  this.form.type2 == '全向' ? this.form.type = 1 : this.form.type = 2;
  this.$axios.post("xxxxxxx", this.form).then((res) => {
    if (res.success) {
      if (res.result) {
        setTimeout(() => {
          let str = this.$url + "downloadImage" + res.result.outPath + "?t=" + new Date().getTime();
          this.src = str;
          console.log(333, this.src);
          this.show = true;
        }, 2000);
      } else {
        uni.showToast({
          title: '暂无数据',
          duration: 3000,
        });
        this.src = "";
      }
    } else {
      uni.showToast({
        title: res.message,
        duration: 3000,
      });
    }
  });
},
<view v-if="show" style="margin-top: 20px;">
  <u-image :src="src" :key="src" width="100%" height="auto" mode="widthFix"></u-image>
</view>

      通过在 <u-image> 组件上使用 key 属性，确保每次 src 更新时，Vue 都会重新渲染组件。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏