vuejs的get请求的图片怎么展示在网页!

1、如果没有权限验证,则简单

<img src="请求全部链接填进去即可" />

2、如果需要发送get请求,那么就需要先把图片转成Blob对象,然后再进行转化!方法如下,

   return request({
        url: url,
        method: 'get',
        responseType:'blob', // 核心点,即http请求的时候让浏览器把响应数据设置成blob,然后再通过js转成图片
        params
    })


响应responseType

xhr.response的数据类型

responseType值xhr.response 数据类型说明
""String字符串默认值(在不设置responseType时)
"text"String字符串
"document"Document对象希望返回 XML 格式数据时使用
"json"javascript对象存在兼容性问题,IE10/IE11不支持
"blob"Blob对象
"arrayBuffer"ArrayBuffer对象

我们获取到了blob对象后,然后再通过FileReader 把blob对象转成图片,代码如下

方法1

.then((res) => {
 var reader = new FileReader()
            reader.readAsDataURL(res) //读取文件保存在result中
            const that = this
            reader.onload = function (e) {
              that.imgURL = [e.target.result] //e.target.result即为转换后的base64图片
            
            }
})

方法2

      this.imgURL = [(URL || webkitURL).createObjectURL(res)]

兼容性的话 都半斤八两!

题外

如果ajax都封装了,则在封装上加一层验证,因为请求的是图片,是没有状态码返回的!

 response => {
     const res = response.data
     if(response.config.url=="请求的url"){
            return res
        }



相关内容

发表评论

验证码:
点击我更换图片

最新评论