vue axios请求图片为目录结构，如何让图片在页面中显示出来

最新推荐文章于 2024-07-12 04:24:57 发布
最新推荐文章于 2024-07-12 04:24:57 发布
阅读量745 收藏 3
点赞数
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mybabyying/article/details/103762732
版权

通常我们在vue项目组请求后台接口数据显示的图片格式为网络地址格式，但有时会显示为目录结构，如下
在这里插入图片描述
而这时在页面中渲染图片是不显示的，因为这是一个图片的绝对路径，并不是网络图片地址

解决方案

首先将请求过来的图片传到data数据中
在这里插入图片描述
在渲染的时候在图片的前面加上接口地址，如图：
在这里插入图片描述
前面的地址为接口请求地址（只需加上top之前的地址数据）

Mybabyying
关注
专栏目录
解决vue3中刷新浏览器页面的axios请求状态变为canceled
蜗牛~~
03-21 1131
为什么会想到fetch呢，是因为最近在开发中要加一个悲观锁的功能，具体需求是：用户1和用户2不能同时打开一个模型进行编辑，用户1优先进入模型后，要对该模型进行上锁，关闭该模型或刷新页面时要进行解锁，此时在刷新页面时出现了问题。由此可得出原因：页面刷新后，页面已经被销毁，但放在mounted中的解锁异步请求还没完成，页面就会主动把未完成的请求取消掉，这时的请求是还没到服务器的。在后台使用 Fetch API，因此它同样具有 64 KB 的载荷限制，以及它还可以确保请求在页面卸载后继续发出。
axios获取图片显示_如何显示从axios请求返回的图像（反应）？
weixin_28878287的博客
12-23 1252
I'm working on a google maps project with React. I assign an onClick handler the following method:getStreetView(lat,lng){let url = `https://maps.googleapis.com/maps/api/streetview?size=600x300&loc...
axios获取图片显示_axios怎么请求图片服务器上的图片并显示到img上？
weixin_39821718的博客
12-23 1015
1.前后端分离项目，前端vue+webpackage+axios，后端springboot2.使用了zuul做网关并配置路由，身份认证通过在header中写入token，在网关入口进行认证2.使用fastDFS做文件服务器并配置了nginx进行在线预览3.fastDFS的在线预览地址不对外开放，通过zuul路由过去。这就要求得有token，因此直接将图片地址写到img的src属性上是行不通了，相关...
axios如何写一个下载图片的请求
最新发布
weixin_35691102的博客
07-12 50
项目方案：使用axios下载图片的请求 简介 在前端开发中，经常会遇到需要下载图片的场景。本方案将使用axios来实现一个下载图片的请求，方便在项目中使用。 实现步骤 引入axios库 编写请求函数 调用请求函数下载图片 引入axios库 首先，在项目中引入axios库，可以使用npm安装或者直接引入CDN链接。 登录...
vue上传图片到数据库并显示到页面
热门推荐
shh520_ty的博客
12-24 1万+
1、点击上传图片，弹出选择图片选项框。     页面代码： div class="form-signin-heading" id="btnUpload" @change="upload">上传图片div> input type="file" name="avatar" id="avatar" multiple="multiple" @change="upload"> img :src="
axios获取图片显示_axios的二次封装
weixin_34638776的博客
01-07 243
一、场景在vue2.x的版本中请求数据推荐使用的axios，之前我常常使用的axios的别名方法,比如说在vue组件中:axios.get('http://localhost:3000/user') .then(res => { console.log(res) }) .catch(err => { console.log(err...
在Vue中使用axios请求拦截的实现方法
10-17
本文将详细介绍如何在Vue中使用axios请求拦截器，以提高代码的可维护性和效率。 首先，了解axios请求拦截器的基本概念。拦截器允许我们在请求发送之前或响应返回之后执行某些操作，如统一设置请求头、处理错误信息...
vue src动态加载请求获取图片的方法
10-17
动态加载本地图片和请求获取的图片在Vue中都是通过`src`属性与数据绑定实现的。对于本地图片，我们可以使用`require`关键字引入；对于请求获取的图片，我们需要配置Webpack来处理图片文件，并在获取数据后将图片URL...
vue+axios实现登录拦截的实例代码
08-30
本篇文章主要介绍了使用 Vue 和 Axios 库来实现登录拦截的实例代码，通过这个项目学习如何实现一个前端项目中所需要的登录、拦截、登出功能，以及利用 Axios 的 HTTP 拦截器拦截请求和响应。 首先，需要生成自己的 ...
vue 使用axios请求图片上传
m0_60805352的博客
11-09 1283
html: <div> <el-upload accept=".jpg,.jpeg,.png,.JPG,.JPEG" action="/index.php/index/upload/uploadimg" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload=
axios发送post请求,提交图片类型表单数据方法
08-27
下面小编就为大家分享一篇axios发送post请求,提交图片类型表单数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue axios从服务器加载图片并显示
nic's blog
03-02 5892
使用场景： 使用传统的img标签查看图片无法添加header，但是后台接口需要头部携带token进行验证。这样的话可以使用axios携带header发起请求，让后台传给前端一个图片二进制流，在前端接收并转成base64的形式展示。 我这里是使用vue-element-template模板进行二次开发的，所以代码模块化程度比较高，具体实现根据自己情况。 模板封装了axios的请求，统一做了添加请求头...
vue中请求接口数据和页面懒加载
2301_77822157的博客
03-31 254
案例:新闻列表页面加载，调用接口为黑马：http://hmajax.itheima.net/api/news。代码放在App.vue中。
vue中使用axios获取本地图片
l10103的博客
04-10 1985
首先，将图片作为静态资源放置在项目的public文件夹中。请注意，上面的示例假定图片位于public/images/example.jpg。如果图片位于不同的目录，请相应地更改路径。
axios请求接口http_axios请求接口，如何接收图片
weixin_39555715的博客
01-06 550
this.axios.get('/1.0/getVerify',{ responseType: 'arraybuffer', params:{ sessionId:this.$route.path } }).then( (data)=> { this.imgUrl = 'data:imag...
VUE怎么动态显示本地文件夹中的图片
tpf1070527713的博客
07-02 7474
需求描述：VUE动态显示本地某一文件夹中的图片 如果我们在项目目录中有一个文件夹，文件夹中有一些图片，我们不知道图片的名字，只知道图片存放的目录，我们想把这些图片展示在VUE页面上，那么我们应该如何实现这个功能呢？ 解决思路： 首先我们需要知道图片的路径，图片的路径是相对路径也可以是绝对路径； 其次我们需要获取到图片的文件名，获取图片文件名我之前的博客中已经有过描述，这里再复习一遍 var requireModule = require.context( "../../assets/Downlo
vue项目中使用axios来请求数据(附具体详细步骤和截图)
zhougushen的博客
09-29 3349
1，首先，我们需要安装axios的依赖包，安装依赖包有很多种方式，新手建议使用，进入cmd，然后输入vue ui命令，用视图鼠标点点点的方式安装。也可以在你的vue项目中的终端输入npm install axios安装，这种对于新手容易出错。 最后一种最适合新手，就是进入到vue ui视图界面，如下图 你可以进入vue项目的package.json文件中手动输入axios和它的版本信息，然后在vue项目的终端执行yarn命令，此时就会安装了，等待终端提示安装完毕即可。这种方法适合任何依赖包.
Axios源码解析（二）：目录结构
f18855666661的博客
03-06 194
1. 文件说明 |-- axios |-- index.d.ts //类型文件，用于规范Axios库中对象和数据的类型 |-- index.js //入口文件 |-- webpack.config.js //webpack的配置文件 |-- lib | |-- axios.js //入口文
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值