首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

img src使用JS/JQuery未按预期工作:显示以前的图像,而不是新上传的图像

在前端开发中,img src是一个用于在网页上显示图片的HTML标签。使用JS/JQuery控制img src时,出现显示以前的图像而不是新上传的图像的情况,可能是由于以下原因导致的:

  1. 图片缓存:浏览器可能会对已经加载过的图片进行缓存,下次再访问相同的图片时会直接从缓存中获取,而不重新请求服务器。这可能导致在更换图片后仍然显示旧的图片。可以通过在图片URL后添加一个随机数或者时间戳参数来防止浏览器缓存,例如:<img src="image.jpg?timestamp=123456789">
  2. 异步加载:如果在图片加载之前就执行了获取新图片的代码,可能导致新图片还未加载完成就被替换成旧图片。可以使用回调函数或者Promise来确保在新图片加载完成后再进行替换。
  3. 路径错误:请确保img src属性中指定的图片路径是正确的。如果路径不正确,浏览器将无法找到新图片并显示旧图片。
  4. 图片上传问题:如果是通过文件上传的方式上传图片,可能存在上传失败或者后台处理延迟的问题。请确保图片上传成功,并且后台已经完成对图片的处理。

总结来说,当使用JS/JQuery控制img src时,要注意处理图片缓存、异步加载、路径错误和图片上传等问题。如果以上问题都排除了,仍然无法按预期工作,可能需要进一步检查代码逻辑和调试。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • input file文件上传(multiple)及FileReader:读取本地图片文件并显示

    FileReader:读取本地图片文件并显示 要想在页面上显示本地图片,以前我们通常做法是将选择图片文件上传至后端服务器,后端对其进行存储,再将图片URL返回到前端,前端通过这个URL来显示图片。...HTML5FileReader接口支持本地预览,FileReader接口主要是将文件读入内存,并提供相应方法,来读取文件中数据,当然就能显示本地图片不需上传了。...方法来读取选中图像文件,最后在onload事件中,获取到成功读取文件内容,并以插入一个img节点方式显示选中图片。... src="'+this.result+'" alt=""/>'      }  }  怎么样,可以看来我们并没有和后台交互就能将本地图片显示在页面中,最后我们来了解下FileReader方法和事件。...DOCTYPE html> <script src="jquery.js

    5.1K10

    Day2:Github项目每日优选之Smartcrop.js

    Github是个巨大仓库,里面有非常多优秀项目。其实并不是一定star多项目才值得关注,有很多小美的项目我们完全可以去关注学习,并及时fork。...---- smartcrop.js详情 1. smartcrop.js介绍 图像裁剪是许多 Web 应用程序中常见工作,通常只需切出图像中心符合我们预期大小就可以了。...但其实有时可能会惨遭失败比如如下例子。 其实我们可以做更好,Smartcrop.js 是可以对内容感知,智能裁剪图像。它使用相当简单图像处理和一些规则来尝试创建更好图像裁剪。...当然我们也可以在node中使用shell。js直接调用smartcrop-cli. 3 算法概述 作者说自己使用相当笨拙图像处理工作。...ccv js / jquery.facedetection 依赖于jQuery tracking.js 浏览器端最实用 opencv.js C++编译来非常重7.6M+ node-opencv node

    90010

    基于jqueryimgAreaSelect.js插件+JAVA后台实现图片裁剪保存功能

    前段时间,项目在做个人信息设置,其中有一项是设置用户头像信息,需要将用户选择头像按照用户需要进行剪切,同时保存为大(120*120)、中(75*75)、小(35*35)三种格式图像,分别显示到不同位置...需求很简单,就是这么easy,这个其中重点就是用户可以自己对选择头像进行截取,最终选择了基于jqueryimgareaselect.js。既然插件都有了,那就开工吧!...第一步: 前端下载必须js插件,后台使用java自带imageio包处理,不需要其他jar包。...-- 加载js文件 --> <script src="js/image.js...(img, selection){})这个地方图片剪切区域变化时触发,我们可以做一些其他处理,比如预览截取部分图像等等。

    6.1K70

    面试简书(五)

    图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片,通过jsimg标签data-src属性赋值给src属性 方案四:...,浏览器直接将指令发到图形加速器不需要开发者更多干预,硬件图形加速器则以难以执行运算速度实时绘画和渲染图形.因此,我们可以使用canvas来渲染base64编码后图片 具体代码如下: // 缓存图片...3.各类插件上传上传需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等,这时传统表单上传很难实现这些功能,我们可以借助现有插件完成。...如百度上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传图像预览插件Dropzone.js等等,大家可根据项目实际需求选择适合插件。...cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像某些部分也许无法显示在背景定位区域中。contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

    1.1K10

    缓冲加载图片 jQuery 插件 lazyload.js 使用方法详解

    解决方法:直接修改 HTML 结构,在 img 标签中添加属性,把 src 属性值指向占位图片,添加 data-original 属性,让其指向真正图像地址。...开始使用 lazyload.js 第一步:加载相关文件。 很明显,你要加载jquery和这个插件。...你可以使用以下代码,加载这几个文件: <script src="jquery.lazyload.js...激活以下,你就可以在目标中使用了。 $("img.lazy").lazyload(); lazyload.js 高级使用方法: 下面部分来自官方文档,将官方文档进行了一下简单翻译。...大体思路如下:用 noscript 包含真实图像位置,当浏览器不支持 Javascript,直接显示图像。对现有图像,隐藏处理,使用 show() 方法触发显示

    2.9K10

    5个方法对于重量级网站图片优化

    但是,不是生成图像来满足这些尺寸要求,而这本身就是一项非常重要任务,您可以使用其他替代方案。例如,你使用300x200px图像,放到200x200px图像要求尺寸中使用。...例如,你可以使用CSS创建按钮,渐变和其他高级元素,不是加载图像。 你可以使用另一个更重要技术是延迟加载图像。延迟加载基本上意味着我们推迟加载不需要图像。...在某些情况下,用户不会向下滚动整个页面,因此根本不会加载某些图像。因此,你最终还可以节省图像传输带宽成本。 有了jQuery Lazy等JS库,使用延迟加载入门非常简单。...然后,如果来自巴西用户从您网站请求图像不是从美国服务器获取该图像,则CDN从巴西最接近该用户节点提供该图像。这减少了加载图像所需往返时间。本维基百科页面列出了一些值得注意CDN。...HTTP / 2是一种用于在Web上传送内容协议,可以帮助显着加快加载时间。它使用多路复用,头压缩和服务器推送等技术来减少页面加载时间。现在,以下CDN支持HTTP / 2。

    1.6K20

    Fancybox图片灯箱效果实现

    Fancybox是一款基于jquery开发类Lightbox插件,同时也是一款很绚丽 jquery 弹出层展示插件,支持对放大图片添加阴影效果,对于一组相关图片添加导航操作按纽。...安装文档:https://fancyapps.com/docs/ui/installation 你可以前往官方下载到本地引入,也可以使用其他CDN库或直接使用下方泽以创建CDN: 在网页头部引入css...src="https://cdn.zeyiwl.cn/fancyui4.0/fancybox.umd.js"> 如果你使用是原生 ES 模块,还有一个 ES 模块兼容构建: <script..."; 示例 Fancybox 原理是使用链接将其链接到更大缩略图图像。.../> JS使用 最简单使用,以所有的img属性作为选项设置特定于图像自定义选项,处理预加载,光标样式,单击,双击和滚轮事件,放大/缩小动画。

    2.5K20

    jQuery框架漏洞全总结及开发建议

    据一项调查报告,在对433,000个网站分析中发现,77%网站至少使用了一个具有已知安全漏洞前端JavaScript库,jQuery位列榜首,而且远远超过其他库。...2.x系列版本等于或低于2.2jQuery 0x02 漏洞复现 1.6.1版本: xss# 1.7.2版本: xss#<img...7、自定义函数,在大多情况下,要使用一些常用 html 标签,以美化页面显示,在这样情况下,要采用白名单方法使用合法标签显示,过滤掉非法字符。...各语言示例: 2.2 jQuery File Upload插件文件上传漏洞 0x01 概述 jQuery File Upload是文件上传小工具,包含多个文件选择:拖放支持,进度条,验证和预览图像...支持跨域,分块和可恢复文件上传以及客户端图像大小调整。适用于支持标准HTML表单文件上载任何服务器端平台(PHP,Python,Ruby on Rails,Java,Node.js,Go等)。

    19K20
    领券