Ajax交互中，存在图片加载失败问题--已解决

最新推荐文章于 2022-05-08 14:34:14 发布
最新推荐文章于 2022-05-08 14:34:14 发布
阅读量650 收藏
点赞数
分类专栏： Ajax bug 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TU_TU9/article/details/124510683
版权
Ajax 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
bug
1 篇文章 0 订阅
订阅专栏

这几天在学习Ajax的相关知识，在不刷新页面的情况下加载内容以及获取数据，结果搞着搞着就卡bug了。

后来发现问题出在JSON代码中

 

 

可以看到我当前设置图片的路径是相对于JSON这个文件，而不是HTML文件，将path里面的路径放到img中也可以很明显的看出来路径就是相对于这个img所在的HTML文件对于存放图片文件夹的位置，所以只要把路径设置为原本HTML路径就好啦

bug解决啦~~~

TU_TU9
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【数据挖掘重要笔记day27】解决将%matplotlib inline修改为%matplotlib notebook转变为动态图片失败没有反应，使用交互式显示方式失败出不来怎么办
汪雯琦的博客
02-17 887
解决将%matplotlib inline修改为%matplotlib notebook转变为动态图片失败没有反应，使用交互式显示方式失败出不来怎么办 代码如下 import numpy as np import matplotlib.pyplot as plt import matplotlib.style as style import warnings #忽略警告提示信息 warnings...
bootstrap-treeview树节点实现动态加载（懒加载）
最新发布
12-22
Bootstrap Treeview是一款基于Bootstrap框架的交互式树形视图组件，它使得在Web应用中展示层级数据变得简单直观。在官方版本中，虽然提供了丰富的功能，但并未直接支持动态加载或懒加载。动态加载（也称为懒加载）是...
ajax 图片加载不出来,jQuery.lazy()插件不能处理通过AJAX加载的图像
weixin_29479561的博客
08-05 228
延迟插件适用于最初加载的元素,但不适用于通过AJAX加载的图像,尽管代码在AJAX调用的done函数中.这是我的延迟加载图像的代码jQuery(document).ready(function() {jQuery("img.lazy").lazy({effect: "fadeIn",effectTime: 1000});});这是我的AJAX电话$(document).ready(function...
mui ajax 懒加载,MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
weixin_39652154的博客
08-05 157
在项目开发中遇到这样的功能，要求实现列表页动态加载功能，在实现过程中遇到一些小小插曲，下面小编给大家详细说明下解决方法：首次加载时图片可以获取成功，再次加载失败，通过chrome调试发现img 的 data-lazyload 属性没改变调试的时候发现了bug$.fn.imageLazyload = function(options) {var lazyloadApis = [];this.each...
ajax传值无法加载响应数据
weixin_54143609的博客
05-08 4570
在做一个小查询功能的时候使用了layui自带jquery的ajax向后端传值接收数据，但莫名奇妙的接收不到信息，查看控制台发现无法加载响应数据，甚至连状态码都没有 直接在url或apipost中访问却可以，由此感觉是前端方面出现问题，百度了半天，最后在这个大佬的文章里找到了问题，原来是button标签属性是submit，点击按钮就是提交整个from表单到action中的位置的 <button lay-submit lay-filter="*"> 搜 索</button&g..
ajax第一次加载,ajax第一次点击不加载
weixin_33279929的博客
08-05 330
我有一些链接，触发ajax函数加载一个div中的内容。它在Chrome和FireFox中运行良好。然而在IE中有一个问题，它反应有趣。如果我在页面加载后第一次点击链接，它不会按预期工作。它会在第二次点击时加载，或者如果我将鼠标悬停在应该更新的区域上。而且只有IE就这样反应。My Javascript function to query datafunction req_frame(box,user...
jquery实现图片延迟加载和ajax方式加载页面
06-10
"jQuery实现图片延迟加载和Ajax方式加载页面"是一种优化策略，旨在解决页面加载速度慢的问题，特别是对于那些资源密集型的网站。 首先，让我们深入了解一下**图片延迟加载（Lazy Loading）**的概念。在传统的网页...
商业编程-源码-Ajax无限级树源码.zip
06-20
4. **JavaScript和jQuery**：在前端开发中，JavaScript是基础，而jQuery则是一个流行的JavaScript库，简化了DOM操作、事件处理和Ajax交互。这个源码可能使用了jQuery来简化代码编写，提高可维护性。 5. **CSS和HTML...
解决jquery的ajax调取后端数据成功却渲染失败的问题
10-18
总的来说，当遇到jQuery AJAX调用成功但渲染失败的问题时，应从数据处理、DOM操作、错误检查和前端-后端交互等多方面进行排查。通过仔细分析和调试，通常可以找出问题所在并解决。同时，保持良好的编程习惯，遵循...
ajax图片框显示图片的加载进度Demo
07-09
同时，可以添加`onerror`事件处理图片加载失败的情况，提供友好的错误提示。 5. **用户交互**：为了增强用户体验，可以添加预加载功能，即在真正图片加载前先显示低质量或占位符图片，这样用户可以立即看到内容，而...
ajax 不能上传图片,自己动手打造ajax图片上传(网上没有的)
weixin_39862097的博客
08-05 196
今天笔者需要一款图片上传插件，但是网上没有提供一款符合自己需求且好用的。于是就自己动手写了一个。方法1，仅使用jquery代码，不用第三方插件。代码如下上传图片$(function() {$('.inp_fileToUpload').change(function() {var formdata = new FormData();var v_this = $(this);var fileObj =...
Ajax加载数据时加载图片
Jiao543的博客
10-14 531
Ajax加载数据时加载图片 .wgui-message{ position: fixed; top: 50%; left: 50%; z-index: 11010; box-sizing: border-box; padding: 10px; min-height: 120px; width: 120px; background-color: rgba(0,0,0,.5); -webkit
ajax轮询 画图 卡死,关于Ajax消耗浏览器内存导致卡死的问题
weixin_30510711的博客
08-05 656
近日要做一个塔吊的报警系统，要求页面5s钟刷新一次，我采用的是JQuery解析XML的格式将信息读取出来，代码如下function getWinstr(){$.get("/XMLServlet",{},function(returnedData, status){varflag =$(returnedData).find("isAlert").text();//读取是否需要报警var wintr...
Jquery ajax 同步阻塞引起的UI线程阻塞的坑（loading图片显示不出来，layer.load延迟）
weixin_44389107的博客
08-24 844
今天想做一个点击地市用ajax重新获取数据刷新页面功能，因为ajax属于耗时操作，想在获取数据且加载页面时显示加载遮罩层，结果发现了ajax的好多坑。 例如如上栗子，我想点击按钮让遮罩层显示，ajax加载完毕后遮罩层消失。因为我想让loadChart()在赋值操作后执行，但如果async设为true时，往往会先执行loadChart(),之后才会赋值，所以我只能将ajax设为同步。但同步后无论我怎么点按钮，遮罩层都不会出来。将显示遮罩放到beforeSend中也没用。用layer.lo...
ajax异步延迟加载图片,lazyload.JS实现图片异步延迟加载
weixin_36035750的博客
08-05 268
前言：很多时候网站上很多图片一次性加载会很慢很卡……这个可以帮助你使用场景：我的使用场景是点击图片再加载图片。使用很简单，他本身是Jquery插件JS写的，依赖于JS只需要引入就可以了。引入JS使用： 以上2种写法是一样的，只是一个把默认图片放在了标签上，一个放在了后面事件中。 src：是默认显示的图片。data-original：是真实地址的图片。使用方法：$("img.lazy").lazy...
ajax填充没显示出来,ajax请求数据成功，页面的数据没有加载出来
weixin_36057741的博客
08-06 655
w3c的ajax的例子，点击按钮，(ajax请求读取一个本地ajax.txt文件)页面展示其内容，在chrome中打开页面，点击按钮请求成功，但是页面没有显示ajax.txt的内容，这是为什么呢？代码和chrome截图如下function loadXMLDoc () {var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox...
ajax 刷新图片,实现ajax图片的刷新
weixin_36286567的博客
08-05 793
直接上代码:这里我使用mybatis框架的逆反工程:所以我这里省略了pojo dao 以及 dao的对应接口需要util工具(也可以自己写): packagecn.util;importorg.apache.ibatis.io.Resources;importorg.apache.ibatis.session.SqlSession;importorg.apache.ibatis.session...
ajax请求后图片打不开,ajax请求图片，二进制形式显示图片有问题
weixin_42177768的博客
08-05 513
我想通过ajax请求图片vm.ajaxGet('/img/logo.png',function(data){//这里data,就是图片本身的文件流，测试ajax没有问题varimg=document.createElement("img");img.onload=function(e){window.URL.revokeObjectURL(img.src);...
jquery ajax图片刷新,使用AJAX / jQuery刷新图像
weixin_42515136的博客
08-06 742
这可能是一个简单的问题，但我很困惑，只是不知道从哪里开始。我有一个PHP脚本(image_feed.php)，该脚本返回图像的URL。每次调用此UR1时，它都会返回可用的最新图像(该图像每隔几秒钟更改一次)。我想发生的是，当页面加载时，有一个对image_feed.php的AJAX调用，该调用返回了最新的URL。然后将该UR1插入HTM1，以替换适当的图像src。5秒后，我希望重复该过程，并更新图...
原生ajax怎么交互图片
06-01
在原生Ajax中，可以通过创建XMLHttpRequest对象并使用它来发送HTTP请求和接收响应。可以通过设置XMLHttpRequest对象的responseType属性来指定响应数据类型，如文本、JSON、XML等。 要交互图片，可以将响应类型设置为“blob”，然后使用URL.createObjectURL()方法将响应数据转换为Blob URL，最后将其设置为<img>元素的src属性即可。 以下是一个简单的示例代码，用于通过Ajax加载图片： ``` var xhr = new XMLHttpRequest(); xhr.open('GET', 'path/to/image.jpg', true); xhr.responseType = 'blob'; xhr.onload = function() { if (this.status === 200) { var blob = this.response; var img = document.createElement('img'); img.onload = function(e) { URL.revokeObjectURL(img.src); // 释放内存 }; img.src = URL.createObjectURL(blob); // 将响应数据设置为Blob URL document.body.appendChild(img); // 添加到文档中 } }; xhr.onerror = function() { console.log('图片加载失败！'); }; xhr.send(); ``` 上述代码中，首先创建XMLHttpRequest对象，然后设置响应类型为“blob”，并通过调用send()方法发送HTTP请求。 当响应数据加载完成后，将其保存在一个Blob对象中，然后创建一个<img>元素，将Blob URL设置为其src属性，并将其添加到文档中。最后，使用URL.revokeObjectURL()方法释放内存。 需要注意的是，Blob URL是一种临时URL，仅在当前窗口中有效，关闭窗口后将自动释放。因此，如果需要长时间保留图片，应该将其保存为本地文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值