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

如何在ajax调用后重新加载img attr "src“,而不知道镜像标签中的文件名?

在ajax调用后重新加载img的src属性,而不知道镜像标签中的文件名,可以通过以下步骤实现:

  1. 获取img标签的src属性值,可以使用jQuery的attr()方法或者原生JavaScript的getAttribute()方法获取。
  2. 发起ajax请求,获取到需要加载的新图片的文件名。
  3. 使用获取到的新文件名替换img标签的src属性值。
  4. 刷新img标签,使其加载新的图片。

下面是一个示例代码:

代码语言:txt
复制
// 获取img标签的src属性值
var imgSrc = $('img').attr('src');

// 发起ajax请求,获取新图片的文件名
$.ajax({
  url: 'your_ajax_url',
  method: 'GET',
  success: function(response) {
    var newFileName = response.fileName;

    // 使用新文件名替换img标签的src属性值
    var newImgSrc = imgSrc.replace(/[^/]+$/, newFileName);
    $('img').attr('src', newImgSrc);

    // 刷新img标签,使其加载新的图片
    $('img').on('load', function() {
      // 图片加载完成后的操作
    }).attr('src', newImgSrc);
  },
  error: function() {
    // 处理错误情况
  }
});

在这个示例中,我们首先获取了img标签的src属性值,然后通过ajax请求获取到新图片的文件名。接下来,我们使用新文件名替换img标签的src属性值,并通过刷新img标签来加载新的图片。请注意,这里使用了jQuery库来简化操作,如果你不使用jQuery,可以使用原生JavaScript来实现相同的功能。

推荐的腾讯云相关产品:腾讯云对象存储(COS)

  • 概念:腾讯云对象存储(COS)是一种海量、安全、低成本、高可靠的云存储服务,适用于存储和处理任意类型的文件,包括文本、图片、音视频等。
  • 优势:高可靠性、低成本、高扩展性、安全可靠、简单易用。
  • 应用场景:网站和应用程序的静态资源存储、大规模数据备份和归档、多媒体内容存储和分发等。
  • 产品介绍链接地址:腾讯云对象存储(COS)

请注意,以上答案仅供参考,具体的实现方式和推荐的产品可能因实际需求和环境而有所不同。

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

相关·内容

3分钟搞定图片懒加载

而且,用户可能只翻看一两页就退出了,剩下未查看图片也就不需要加载了。这也相当于节省了带宽资源。 懒加载实现原理 由于浏览器会自动对页面img标签src属性发送请求并下载图片。...因此,通过html5自定义属性data-xxx先暂存src值,然后在需要显示时候,再将data-xxx重新赋值到imgsrc属性即可。...可以看出,10张图片是一次性全部加载。 下面改造成懒加载: 首先将页面上图片 src 属性设为空字符串,图片真实路径则设置在data-src属性。...当页面滚动时候需要去监听scroll事件,在scroll事件,判断我们加载图片判断是否出现在视口内,如果出现在视口内,则将data-src赋值到src。...思路:当页面滚动时候需要去监听scroll事件,在scroll事件,判断滚动条是否滚动到最底部,如果是,则将将图片 src 属性设置为data-src值。

2.4K20

springMVC实现文件图片上传下载功能详解(源码已提供,小白必看)(一)

我们在做项目的时候,有时候遇见要实现Word文件,图片实现上传和下载,springmvc给我们提供了很好方法,以下将从前端到后端进行详解,附带源码和实现效果 [1] 上传前台实现 如何在页面显示一个按钮...,用户可以点击该按钮后选择本地要上传文件 在页面中使用input标签,type值设置为”file”即可 确定上传请求发送方式 上传成功后响应结果在当前页面显示,使用ajax请求来完成资源发送 上传请求请求数据及其数据格式...请求数据: 上传文件本身 普通数据:用户名,Id,密码等,建议上传功能不携带除上传资源以外数据 数据格式: 传统请求,请求数据是以键值对格式来发送给后台服务器,但是在 上传请求,没有任何一个键可以描述上次数据...').val(obj.url); $('#myImg').attr("src","upload/"+obj.url).css("display",..." id="img" value="" > <img src="" alt="" id="myImg" width="100px" style="display

2K30

前端开发者都应知道 jQuery 小技巧

在新窗口打开外部链接 找到文本元素 切换可视与隐藏触发器 Ajax 调用错误处理 链式操作 回到顶部按钮 通过使用 jQuery animate 和 scrollTop 方法...(var i = 0; i < arguments.length; i++) { $('').attr('src', arguments[i]); } }; $.preloadImages...这段简单代码可以帮上大忙: $('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); 即使你没有任何损坏链接...$('input[type="submit"]').prop('disabled', false); 停止链接加载 有时你不想链接跳转到某个页面或重加载该页面,希望可以做一些其他事情.../窗口打开站外链接 在一个新标签或者新窗口中打开外置链接,并确保站内链接会在相同标签或窗口中打开: $('a[href^="http"]').attr('target', '_blank'

2.3K30

浏览器跨域问题.

同源策略 首先基于安全原因,浏览器是存在同源策略这个机制,同源策略阻止从一个源加载文档或脚本获取或设置另一个源加载文档属性。看起来不知道什么意思,实践一下就知道了。...script标签跨域能力 不知道大家知不知道CDN这个东西,例如微软CDN,使用它,我们网页可以不提供jQuery,由微软网站帮我们提供: <script src="http://ajax.aspnetcdn.com...实践: functionCreateScript(src){ $("").attr("src", src).appendTo("body") } 添加一个按钮事件来测试一下...由于服务器不知道客户端是什么,不可能hard code成jsonpcallback,所以就带一个QueryString让客户端告诉服务端,回方法是什么,当然,QueryStringkey要遵从服务端约定...利用jQuery获取jsonp 上面的方式,又要插入script标签,又要定义一个回,略显麻烦,利用jQuery可以直接得到想要json数据,同样是上面的jsonp: $("#getJsonpByJquery

1.3K190

jQuery基础图文系列

: jquery入口函数是在html所有标签加载后才执行,JavaScriptwindow.onload事件是等到所有内容加载完后才执行。...append() 向匹配元素集合每个元素结尾插入由参数指定内容 appendTo() 向目标结尾插入匹配元素集合每个元素 attr() 设置或返回匹配元素属性和值 before() 在每个匹配元素之前插入内容...$("img").length;//返回图片标签个数 设置或返回被选元素属性值。...$("img").attr("src","test.jpg");//设置图片src属性为test.jpg $("img").attr("src");//返回图片src属性 从每一个匹配元素删除一个属性...;//设置所有 p 元素文本内容 向每个匹配元素内部追加内容。 $("p").append("Hello");//向所有P标签追加一些HTML标记 从DOM删除所有匹配元素。

4.4K10

ajax使用案例

后面需要对服务器给我们返回数据进行操作,那么我们就取4数据用变量形式放到ajax创建html标签。这样前端访问到这个页面时就要从后端获取来数据进行渲染网页了。...({}) }) 记得外面的(function{})是加载完文档才执行内部代码,防止文档没加载完,js操作没加载标签事情。...想要实现ajax请求是放在.ajax({})里面的。ajax是jQuery方法,需要导入jQuery库文件。刚才犯了个错误,没有放到 下面就是代码执行后获取到这个api数据对象。...//疑问,{}引用变量只是反引号吗? 后面再使用attr添加属性也是可以。...$(父选择器).on(‘事件’,‘标签’,匿名函数) //错选择是li不是ul标签

11.6K20

第113天:Ajax跨域请求解决方法

所以可以使用script标签src属性请求后台数据 1  ② 由于src加载数据成功后,后直接将加载内容放入到script标签  所以,后台直接返回JSON字符串将不能在script标签解析  因此,后台应该返回给前台一个回到函数名...,并将JSON字符串作为参数传入  后台PHP文件返回: echo "callBack({$str})"; ③ 前台接收到返回回到函数,将直接在script标签调用。...若要跨域请求出于安全性考虑是不行,但是我们发现,Web页面上调用js文件时则不受是否跨域影响,而且拥有”src”这个属性标签都拥有跨域能力,比如、、,这时候...方法采用jQueryajax方法调用后Web服务GetSingleInfo方法,后台GetSingleInfo方法,使用前端方法OnGetMemberSuccessByjsonp包装后台业务操作

1.4K10

jsoup详解

同源策略 首先基于安全原因,浏览器是存在同源策略这个机制,同源策略阻止从一个源加载文档或脚本获取或设置另一个源加载文档属性。看起来不知道什么意思,实践一下就知道了。...script标签跨域能力 不知道大家知不知道CDN这个东西,例如微软CDN,使用它,我们网页可以不提供jQuery,由微软网站帮我们提供: <script src="http://ajax.aspnetcdn.com...实践: function CreateScript(src) { $("").attr("src", src).appendTo("body") } 添加一个按钮事件来测试一下...由于服务器不知道客户端是什么,不可能hard code成jsonpcallback,所以就带一个QueryString让客户端告诉服务端,回方法是什么,当然,QueryStringkey要遵从服务端约定...利用jQuery获取jsonp 上面的方式,又要插入script标签,又要定义一个回,略显麻烦,利用jQuery可以直接得到想要json数据,同样是上面的jsonp: $("#getJsonpByJquery

1.7K90
领券