vue+axios将后端返回的图片流显示到img标签中

      var myForm = new FormData() //要传给后端的数据
      myForm.append(数据的key, 数据的value)
      var headers = { 'Content-Type': 'multipart/form-data' }
      axios({
        method: 'post',
        url: 请求地址,
        data: myForm,
        responseType: 'arraybuffer',
        headers: headers,
      })
        .then((response) => {
          return (
            'data:image/png;base64,' +
            btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          )
        })
        .then((data) => {
          this.codeUrl = data //data可以直接放到img标签的src中
        })

费了好大劲,刚开始用什么blob结果格式不对,又直接写base64的也不对,直接赋值更不对了。

上面的方法可以,亲测有效,responseType: "arraybuffer",很重要哦

 

 

  • 6
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
在Spring Boot使用Vue和Element UI来显示后端图片,可以按照以下步骤进行操作: 1. 在Spring Boot项目,创建一个用于存储图片的文件夹,比如将其命名为"images"。 2. 将需要显示图片上传到该文件夹。 3. 在后端编写一个Controller,用于处理图片请求。可以添加一个接口,比如"/api/image/{imageName}",用于获取某个特定图片的路径。 ```java @RestController @RequestMapping("/api/image") public class ImageController { @Value("${image.path}") private String imagePath; @GetMapping("/{imageName}") public void getImage(@PathVariable String imageName, HttpServletResponse response) throws IOException { File file = new File(imagePath + "/" + imageName); FileInputStream fis = new FileInputStream(file); IOUtils.copy(fis, response.getOutputStream()); } } ``` 配置文件的image.path属性需要指向存放图片的文件夹路径。 4. 在Vue,使用Element UI的表格组件来显示图片。首先在Vue组件定义一个data属性,用于保存图片数据。 ```javascript data() { return { imageUrl: '/api/image/' tableData: [] }; } ``` "imageUrl"属性用于指定获取图片的接口路径。 5. 从后端获取图片数据,在Vue组件的"mounted"生命周期发起一个请求,获取后端返回图片数据,并将其赋值给表格的数据属性。 ```javascript mounted() { axios.get('/api/imageData') .then(response => { let data = response.data; // 对返回data进行处理,将图片路径拼接上指定的路径 data.forEach(item => { item.imageUrl = this.imageUrl + item.imageName; }); this.tableData = data; }) .catch(error => { console.error('Error:', error); }); } ``` 6. 在表格的列定义,使用Element UI的"el-table-column"组件来显示图片。 ```html <el-table-column prop="imageUrl" label="图片"> <template slot-scope="scope"> <img :src="scope.row.imageUrl" width="100" height="100"> </template> </el-table-column> ``` 通过以上的步骤,就可以在Spring Boot使用Vue和Element UI来显示后端图片了。在表格图片,会显示相应的图片
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值