首页 > 其他分享 >vue中,一个参数是一个图片网络地址,当重新上传一个图片替换原来的图片后,地址没变,但是图片还是原来的

vue中,一个参数是一个图片网络地址,当重新上传一个图片替换原来的图片后,地址没变,但是图片还是原来的

时间:2023-08-24 16:34:34浏览次数:34  
标签:vue URL 地址 网络地址 参数 图片

这个问题可能是由于浏览器缓存导致的。为了解决这个问题,你可以向图片的URL地址中添加一个随机参数,以确保每次加载图片时都会从服务器获取最新的图片。你可以使用类似于以下方式来添加随机参数:

<img :src="imageUrl + '?timestamp=' + Date.now()" />

这样,每次你更新了图片后,URL中的timestamp参数都会改变,强制浏览器重新加载图片。这样就能确保你看到的始终是最新的图片了。

标签:vue,URL,地址,网络地址,参数,图片
From: https://www.cnblogs.com/panwudi/p/17654456.html

相关文章

  • Vue组件缓存之keep-alive正确使用姿势
    先来看一个项目中的需求作为苦逼的前端开发者,我们无时无刻都要面对产品经理提的各种需求,比如下图这个场景场景:从首页的点击导航进入列表页,列表页点击列表进入该数据详情页从详情页返回,希望列表页缓存,不重新渲染数据,这样会提高用户体验。分析一下这样需求,如果是小程序......
  • Electron,VUEJS3,Vite,TypesSript 开发环境配置
    Electron,VUEJS3,Vite,TypesSript开发环境配置项目早期是vue3+vite开发的,后期由于运营需求,要修改为Win安装包。方案还是比较多的:1.WPF-Webview由于目前只需要兼容win,所以可以选择WPF,但WPF需要WebView的,还需要本地架设服务。整体部署比较复杂以及需要熟悉C#与WPF相关开发。2.......
  • vue3 使用 setup 语法糖时,keep-alive 缓存使用 include / exclude 获取组件名
    <template><router-viewv-slot="{Component,route}"><keep-alive:include="['ComponentName']"><component:is="Component":key="route.name"/></keep-alive>......
  • Vue【原创】数据可视化,复合数字形式展示
    做数据可视化的时候,经常碰到需要很灵活的数字形式展示。先上个效果图: 如图包括名称,数量,别名,单位,上升下降,环比等等的复合数据展示,并且需要支持样式灵活配置。此组件包括2个模块,父容器组件box-group,其中每一项的子组件box。 父组件box-group1<template>2<divcl......
  • vue3 报错:husky - pre-commit hook exited with code 1 (error)
    问题:git提交不上去解决方法:   "format":"prettier--write\"./**/*.{html,vue,ts,js,json,md}\"",......
  • 找不到模块“../view/Home.vue”或其相应的类型声明。
    环境:vue3+ts解决办法:在src目录里面添加env.d.ts文件,在文件里贴上declaremodule'*.vue'{importtype{DefineComponent}from'vue'constcomponent:ComponentOptions|ComponentOptions['setup']exportdefaultcomponent} ......
  • VUE input允许数字 且两位小数
    页面:<[email protected]="onlyNumber()"placeholder="请输入(整数或者小数)金额"v-model="form.ysje"></el-input>方法:onlyNumber(){this.form.ysje=this.onlyNumOnePoint(this.form.ysje);},onlyNumOnePoint(number_on......
  • Vue【原创】下划线动态效果按钮,一般按钮模式,开关切换模式。
     1.lilo-icon-button一般按钮模式:1<template>2<divclass="icon-button":style="{color:font.color}"@click="onclick">3<i:class="[icon.type]":style="{color:icon.color,font......
  • vuedraggable和vue-fragment冲突导致连续多次拖拽报错问题
    项目中使用了vuedraggable实现拖拽功能。同时为了不产生多余标签,引入了vue-fragment。在连续多次拖动之后,总是报错。 解决办法:卸载vue-fragment。如果不想引入多余的标签,可以直接使用<template>,而且<template>标签是标准的HTML标签,更具可移植性。......
  • Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?
    在vue中,默认情况下,一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。但是vue提供了keep-alive组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的......