vue+ant design中关于图片请求不显示的问题。

最新推荐文章于 2024-06-21 17:13:28 发布
最新推荐文章于 2024-06-21 17:13:28 发布
阅读量2.8k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sara0064/article/details/109577276
版权

遇到这么个问题，后端给前端传递了图片流，按道理来说，前端通过img标签就可以引入显示，当时我的却怎么也不显示。
在这里插入图片描述
本来应该显示出来的，那我们就直接打印一下reponse的数据吧
里面是一堆图片流代表我们都从后端请求到了，有资源，但是前端不显示，
��
*)����yR8�e��
那我们应该怎么办呢，首先在请求的出接口的地方添加如下代码：
在这里插入图片描述
在这里插入图片描述
然后
最重要的一步在请求后端接口数据时候，添加 responseType:“blob” 目的是为了把流转化为url
在这里插入图片描述
这样就可以显示出来了

Sara0064
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3.0中ant-design样式引入无效问题
qq_37947438的博客
04-06 7278
最近做新项目时想试试vue3.0+ts+ant-design，在依赖都装完后，随便写了个页面样式却出不来，如下图 经过一番百度，终于知道了原来在使用antd的时候， css 不能开启 css modules，我们只需要把vue.config.js的css配置下把modules改为false就可以了，如下图 重启项目后就可以了 值得注意的是，在我们刚刚配置的vue.config.js文件下，modules属性与requireModuleExtension是补鞥呢同时存在的，不然会被后者覆盖，把requi
anacheAnt-ImageMagic-rpmbuild-arm.zip
06-08
ImageMagick-7-0.ky10.aarch64 和 apache-ant-1.10.5-0.ky10.aarch64 。在ARM架构专业机中需要的rpm打包文件。
ant-design-vue3实现上传图片错误时图片不显示在预览列表中
最新发布
qq_39080240的博客
06-21 328
使用ant-design-vue3的a-upload的上传图片功能，实现上传图片后图片预览的功能，框架中默认是上传后就会预览，但是实际是如果不符合格式的文件或是图片不要预览在列表中，以免在提交调研接口的时候将错误的图片也一起提交了，导致接口报错；在解决这个问题的时候a-upload提供了一个属性 :before-upload="beforeUpload"return Upload.LIST_IGNORE；
React+Ant Design: 使用＜Image＞无法显示图片
Danica的博客
06-23 1995
问题:src属性无法之间读取相对路径
Antd的Image引入无法显示
qq_53528172的博客
03-23 617
下载插件（这个插件就是将代码从 require 语法转换为 import ）当然，在这里绝对路径也不行。
vue 加载图片不显示
m0_49494051的博客
05-31 199
首先图片要放在这里 public/static 后期动态加载使用动态图时，路径不写public <img src="../../../static/faces/value.png" style="width:20px; height: 20px;"/> 还有就是路径要写对哟~~
image标签部分图片不显示问题
dujyong的博客
12-07 4101
image标中图片不显示问题 最近项目中遇到的一个问题,后台上传的图片在前台展示时,部分图片不显示,因为图片是通过循环出来的,所以经过排查,觉得问题应该出在图片路径上面,上图: 真机测试,获取到的图片路径以http://cimg开头的图片并没有显示出来,测试工具: *后来经过排查踩坑发现,获取到的图片路径中如果带有括号及特殊字符的话,有小部分是渲染不出来的, 解决 我们要在用户上传图片时做处理,...
Vue3+Vite+Ant Design 后台管理系统模板.zip
07-06
Vue3+Vite+Ant Design 后台管理系统模板是一个现代且高效的前端开发框架组合，用于构建功能丰富的Web应用。这个模板结合了Vue.js的最新版本3、Vite构建工具以及Ant Design Vue UI库，旨在提供一个快速开发后台管理...
SpringBoot+AntDesignVue实现excel导入功能
07-20
在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的功能。 标题： SpringBoot+AntDesignVue 实现 ...
基于 vue3 + ant-design-vue 的中后台管理系统.zip
05-26
Vue3 + Ant Design Vue 中后台管理系统是一个现代前端框架的应用实例，用于构建高效、可复用且易于维护的企业级管理界面。Vue3 是 Vue.js 的最新版本，提供了许多性能优化和新特性，而 Ant Design Vue 是一套基于 ...
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
11-20
在这个示例中，我们探讨如何使用Vue.js、Django和Ant Design构建一个留言评论模块。首先，我们将关注数据库设计，然后讨论后端接口的实现，最后提到前端展示和交互。 **1. 数据库设计** 留言模块的核心是留言表...
Ant designe vue中有关默认组件引入不生效的问题；
九七的博客
04-12 562
就是需要在懒加载的js文件中引入一下，然后vue.use对应的组件即可。
vue中 antdesginVue ＜a-image/＞图片标签去掉蒙层（鼠标滑过）里面的“预览”二字 或者使用deep自定义样式不生效问题。
我只是个很菜的前端
05-30 3236
vue中 antdesginVue 图片标签去掉蒙层（鼠标滑过）里面的“预览”二字 或者使用deep自定义样式不生效问题。
ant-design vue3 中上传图片组件的回传图片显示问题
阿乐的博客
06-04 382
最近在做web端的上传图片 有一个数据列表中的编辑功能 是之前上传的图片 点击编辑进入编辑页面 会显示之前写的数据 现在需要把原来上传的图片 显示出来。因为 a-upload 需要这样的数据格式 所以要将数据处理一下 循环 添加字段 就可以了。因为之前给后端上传的 图片格式 是一个数组 ["图片链接"，“图片链接”。所以回传给 a-upload 组件的时候 显示不出来。后端给我返回的数据也是这杨。
vue引入ant Design报警告并且页面空白不显示
y2745818985的博客
12-05 953
vue引入ant Design报警告并且页面空白不显示
image标签不显示照片img标签能显示
weixin_44483079的博客
05-13 521
uni-app的项目我之前测试的时候用的image标签也能正常显示照片，后面从服务端拿到base64数据发现照片不显示，单独拿base64照片数据用base64去做解析发现能正常显示，但是页面就不显示照片mmp，然后我换成了img标签显示正常,搞不懂什么原因mmp ...
运用 ant 图片上传组建 实现pc端图片预览
qq_44766377的博客
05-11 1621
最后效果 展示效果（样式用样式穿透自己可调） 点击预览效果 这里css得做个样式穿透 因为ant自带一个删除功能 将垃圾桶图标取消显示 .img{ /deep/.ant-upload-list-item{ //宽高设置 margin:0; padding: 0; width: 40px; height: 40px; } /deep/....
imageAnt中的图片放大缩小以及旋转的优化
njsjlx的专栏
01-01 2349
 点击这里下载imageAnt imageAnt除了能制作特效文字和添加图片水印等功能外，本身是一个图片浏览器，类似于XP中的图片浏览器，所不同的是imageAnt能支持图片自由旋转。图片放大缩小以及旋转的算法都简单。但缩放和旋转合在一起就不那么简单了。开始的时候，我做这个功能是简单的把图片放大然后旋转。图片小效果还不错，但图片大了速度就奇慢，处理时间呈指数级上升。特别是图片放大后
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值