vue+elementUI禁止缓存图片

在 Vue 中，可以通过在 `img` 标签中添加一个随机参数来禁止图片缓存，例如：

<template>
  <div>
    <img :src="imageUrl + '?t=' + new Date().getTime()" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
}
</script>

这里使用 `new Date().getTime()` 作为随机参数，每次页面加载时都会生成一个新的时间戳，防止浏览器缓存该图片。

相关问题

vue+elementUI禁止缓存

在Vue和ElementUI中，禁止缓存可以使用以下方法：

1. 使用路由配置

在路由配置中使用“meta”字段来定义一个布尔值，表示是否需要在每次路由切换时刷新页面。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: {
        refresh: true // 禁止缓存
      }
    },
    {
      path: '/bar',
      component: Bar
    }
  ]
})

然后在组件中使用“created”钩子函数来检查路由的“meta”字段，如果需要刷新页面，则使用“location.reload()”方法来刷新页面。例如：

export default {
  created() {
    if (this.$route.meta.refresh) {
      location.reload();
    }
  }
}

2. 使用ElementUI控件

在ElementUI中，可以使用“el-tabs”控件来禁止缓存。使用“v-if”指令来动态地创建和销毁“el-tab-pane”控件。例如：

<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name" v-if="isActive(item)">
      <div>{{ item.content }}</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'tab1',
      tabs: [
        {
          label: 'Tab 1',
          name: 'tab1',
          content: 'Content of Tab 1'
        },
        {
          label: 'Tab 2',
          name: 'tab2',
          content: 'Content of Tab 2'
        },
        {
          label: 'Tab 3',
          name: 'tab3',
          content: 'Content of Tab 3'
        }
      ]
    };
  },
  methods: {
    isActive(item) {
      return this.activeName === item.name;
    }
  }
};
</script>

在“isActive”方法中，检查当前选中的标签是否与当前的“el-tab-pane”控件匹配。如果匹配，则返回“true”，否则返回“false”。这样，每次切换标签时，Vue会重新创建和销毁“el-tab-pane”控件，从而禁止缓存。

vue+elementUI使用pan-thumb禁止缓存图片

在Vue ElementUI中，可以使用v-bind指令将一个对象中的属性动态地绑定到一个元素的属性上。可以使用v-bind:style设置元素的样式，包括禁止缓存图片。

例如，可以在pan-thumb组件中使用v-bind:style来设置background-image属性：

<el-scrollbar>
  <el-scrollbar__wrap>
    <el-scrollbar__view>
      <el-image
        v-for="(item, index) in list"
        :key="index"
        :src="item.src"
        style="width: 100%; height: 100%; object-fit: contain;"
      >
        <pan-thumb :style="{ 'background-image': 'url(' + item.src + '?t=' + new Date().getTime() + ')' }" />
      </el-image>
    </el-scrollbar__view>
  </el-scrollbar__wrap>
</el-scrollbar>

在这个例子中，使用了new Date().getTime()来生成一个随机的时间戳，将它与图片的URL拼接在一起，确保每次加载图片时都是新的URL，从而禁止图片缓存。