image src请求两次问题

image src使用http地址导致请求两次

问题复现

当uni-app内使用image,src地址为http网络地址时,会发现请求了两次。
在这里插入图片描述
可以看到其他使用本地地址的图片只请求了一次,但使用http的请求了两次。
查看了获取图片http地址方法也只执行了一次,然后当使用其他块来承接src就不会触发两次请求。

问题原因

查询了官方文档,也没具体的原因,只能初步判断是该图片组件问题。

解决

    <image v-if="codeImg" class="code-img" :src="codeImg" @click="getVerifyCode"></image>
     // 使用上面的代码,当src为http时,会请求多次。所以改为背景显示
     <view class="code-img" :style="{background: 'url(' + codeImg + ') no-repeat', backgroundSize: '100% 100%'}"></view>

若哪位大佬知道具体的原因,麻烦告知一哈,谢谢。

### 回答1: 您好,对于 js 请求文件夹图片的操作,可以通过以下方式进行: 1. 通过 AJAX 请求图片。 2. 使用 jQuery 中的 $.ajax() 方法。 3. 使用 fetch API 请求图片。 4. 使用 XMLHttpRequest 请求图片。 希望这些信息对您有帮助。如果您有其他问题,可以继续提问。 ### 回答2: 在JavaScript中,要请求文件夹中的图片,可以使用以下方法: 1. 使用XMLHttpRequest对象进行文件夹图片的请求。首先,创建一个XMLHttpRequest对象: ```javascript var xhr = new XMLHttpRequest(); ``` 然后,设置请求的URL,即文件夹路径: ```javascript xhr.open('GET', '文件夹路径', true); ``` 接下来,设置响应类型为blob,以便可以处理图片文件: ```javascript xhr.responseType = 'blob'; ``` 最后,发送请求并处理响应: ```javascript xhr.onload = function() { if (xhr.status === 200) { var imageUrl = URL.createObjectURL(xhr.response); // 使用imageUrl进行后续操作,例如显示图片等 } }; xhr.send(); ``` 2. 使用fetch API进行文件夹图片的请求。这是一种现代化的方式,使用Promise进行异步操作。首先,使用fetch函数来获取文件夹图片: ```javascript fetch('文件夹路径') .then(function(response) { return response.blob(); }) .then(function(blob) { var imageUrl = URL.createObjectURL(blob); // 使用imageUrl进行后续操作 }); ``` 这两种方法可以根据具体需求选择合适的方式来请求文件夹图片。需要注意的是,以上代码只能获取到文件夹中的第一个图片,如果需要获取文件夹中的所有图片,可以通过遍历文件夹中的文件来进行多次请求。 ### 回答3: 在JavaScript中,要请求文件夹中的图片,可以通过以下步骤进行操作: 1. 首先,需要通过XMLHttpRequest对象或者fetch API创建一个HTTP请求对象。 2. 然后,使用请求对象的open方法来指定请求的方法和URL。URL应该是文件夹的路径,以及你想要请求的图片的文件名。 3. 接下来,设置请求对象的响应类型为“blob”,以便将响应内容作为二进制数据处理。 4. 使用请求对象的send方法来发送HTTP请求。可以选择传递一些参数,例如查询字符串或请求主体。 5. 当请求得到响应时,可以在请求对象的onload回调函数中进行处理。在这里,将会得到响应数据对象,可以通过调用URL.createObjectURL方法来创建一个URL对象,将其作为图片的src属性值。 下面是一个简单的示例代码,展示如何通过JavaScript请求文件夹中的图片: ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', 'folder/path/image.jpg', true); xhr.responseType = 'blob'; xhr.onload = function() { if (this.status === 200) { const imageURL = URL.createObjectURL(this.response); const img = document.createElement('img'); img.src = imageURL; document.body.appendChild(img); } }; xhr.send(); ``` 在这个示例中,我们使用XMLHttpRequest对象来发送HTTP GET请求,并请求名为"image.jpg"的图片文件。在响应成功时,我们创建了一个img元素,并将其src属性设置为通过createObjectURL方法创建的URL对象。最后,将img元素添加到文档的body中,以显示该图片。 需要注意的是,这只是一个基本的例子,实际操作中可能需要根据具体需求进行适当的修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值