首页
学习
活动
专区
工具
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来显示图片。...而HTML5的FileReader接口支持本地预览,FileReader接口主要是将文件读入内存,并提供相应的方法,来读取文件中的数据,当然就能显示本地图片不需上传了。...方法来读取选中的图像文件,最后在onload事件中,获取到成功读取的文件内容,并以插入一个img节点的方式显示选中的图片。... src="'+this.result+'" alt=""/>'      }  }  怎么样,可以看来我们并没有和后台交互就能将本地图片显示在页面中,最后我们来了解下FileReader的方法和事件。...DOCTYPE html> src="jquery.js

    5.2K10

    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

    91910

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

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

    6.1K70

    面试简书(五)

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

    1.1K10

    《Web性能实战》读书笔记

    -o index.html index.src.html 使用服务器压缩 服务器压缩的工作方式是用户从服务器请求网页,用户的请求会附带一个Accept-Encoding的头信息,向服务器告知浏览器可以使用的压缩格式...使用CSS过渡 CSS过渡的优点: 广泛支持; 回流复杂DOM时,CPU的使用效率更高; 无额外开销。 如果动画可以使用CSS过渡来实现的话,最好使用CSS过渡而不是JS来改变DOM(减少回流)。...:图片上添加lazy样式,同时使用data-src代替src,src使用默认未加载图片来代替,如: img src="img/blank.png" data-src="img/red-snapper-...type jquery.min.js jquery.min.js > script.js 使用AMD:https://github.com/requirejs/alameda src=".../jquery-2.2.4.min.js" as="script"> src="https://code.jquery.com/jquery-2.2.4.min.js

    25710

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

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

    3K10

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

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

    1.6K20

    仿百度排列图片预览插件-Simple Lightbox

    很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网站里面找一个插件...的 Lightbox 插件,它具有以下特点: 响应式设计 触控/触摸友好 提供多项配置 图像预加载 支持 iOS / Android / Windows phone 使用 CSS3 过度效果,并回退兼容旧浏览器...src="js/jquery.min.js"> src="js/simple-lightbox.min.js"> 2、HTML src="js/jquery-1.11.3.min.js"> src="js...坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

    1.7K20

    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.6K20

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

    据一项调查报告,在对433,000个网站的分析中发现,77%的网站至少使用了一个具有已知安全漏洞的前端JavaScript库,而jQuery位列榜首,而且远远超过其他库。...2.x系列版本等于或低于2.2的jQuery 0x02 漏洞复现 1.6.1版本: xss#img src=1 onerror=alert('jayway')> 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等)。

    19.4K20
    领券