vue项目中从服务器获取图片

最新推荐文章于 2024-06-01 13:30:13 发布
最新推荐文章于 2024-06-01 13:30:13 发布
阅读量1.8w 收藏 3
点赞数
分类专栏： 前端开发 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012086400/article/details/78643680
版权

在加载轮播图的时候，想用现成的网络图片，引发了下面的问题：
http://imglf5.nosdn.127.net/img/BPT0.png?imageView&thumbnail=500x0&quality=96&stripmeta=0&type=jpg 403 (Forbidden)
搜索问题，发现是因为这个网站做了反盗链Anti HotLinking，
这里是别人的关于此问题的详解：关于img 403 forbidden的一些思考
所以我还是乖乖把图片放到了本地服务器。
我使用的 mint-ui Swipe，在引入的时候发现并没有显示出来，还以为引入有错误。控制台查看的时候发现元素存在，但是高度为0，所以没显示出来，手动设置了高度之后就显示出来了。看来高度设置是必须的。

月季花开sky
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue src动态加载请求获取图片的方法
10-17
使用Vue的`axios`或者其他HTTP库向服务器发送请求获取图片数据。在`created()`生命周期钩子中执行请求： ```javascript created() { const that = this; this.request({ url: '/sysInfoFront/list', method: ...
vue前端从服务器中获取图片的方式
m0_44981797的博客
04-12 4719
当图片较大被存在服务器中时，前端可以通过 :src 拼接地址的方式获取服务器的图片，注意要动态绑定地址。代码如下（注意引号!!!）： <image :src = " '地址头(后台给的地址)' + 图片标识 " /> //代码示例 <image :src = " ' https:// XXXXXXX ' + item.photo " /> 如果图片已经有了.jpg后缀则无需再添加。 ...
VUE获取服务器中图片简易方法
hhh590_hh的博客
08-07 7189
VUE获取服务器中图片简易方法 前端获取服务器中的图片 本文基于前后端分离的项目，前端VUE，后端SSM，后端已在云服务器中使用tomcat部署。 在tomcat的webapp目录下找到后端项目文件夹，在WEB-INF同级目录中，创建一个文件夹，本文以img为例 注意该文件夹权限为777。 启动tomcat服务，在VUE中动态引入图片，注意此处不能用require。 <img :src="'http://***.**.**.***:8088/SSM/img/'+name+'.jpg'" alt&gt
VUE前端处理后端接口返回的图片
最新发布
Tyler961123的博客
06-01 932
上传的文件保存在项目目录下的yourFiles目录下，部署以后，存放在容器的/app/yourFiles目录下。注意这里一定要新增 {responseType:'blob'}。
vue+springboot前端如何获取服务器或磁盘中的图片
lCSDNkingdoml的博客
04-10 9464
前后端分离下，前端如何进行图片的显示
vue从服务器（后台接口）获取图片流，前端显示的简单实现
reembarkation的博客
07-05 9378
vue项目中通过接口type为blob的形式获取图片的解决办法
vue axios从服务器加载图片并显示
nic's blog
03-02 5771
使用场景： 使用传统的img标签查看图片无法添加header，但是后台接口需要头部携带token进行验证。这样的话可以使用axios携带header发起请求，让后台传给前端一个图片二进制流，在前端接收并转成base64的形式展示。 我这里是使用vue-element-template模板进行二次开发的，所以代码模块化程度比较高，具体实现根据自己情况。 模板封装了axios的请求，统一做了添加请求头...
前端vue通过URL访问存储在服务器或磁盘的图片
weixin_68266674的博客
10-21 2701
这里前端访问使用的是element。
Vue 图片压缩并上传至服务器功能
11-21
在 Vue 项目中，我们可以使用 Vant UI 提供的图片选择组件 `van-image-picker`，让用户选择图片。选中的图片通常是 Base64 格式，接下来就是图片的压缩过程。 `CompressImageUtils` 工具类的核心是利用 HTML5 的 ...
vue 实现剪裁图片并上传服务器功能
08-27
在本文中，我们将探讨如何在Vue项目中实现图片剪裁并将其上传到服务器的功能。这个功能在许多应用中都很常见，例如头像选择或图像编辑。 首先，我们需要理解实现这一功能的关键步骤。在Vue组件中，我们可以创建以下...
Vue 中对图片地址进行拼接的方法
10-18
在Vue.js开发中，有时我们需要处理图片资源的URL，尤其是当从服务器获取的数据中，图片的URL只是一个部分路径或者不完整的URL时。本篇文章将详细讲解如何在Vue中对图片地址进行拼接，以便正确地展示图片。 首先，...
vue调用服务器图片
轻风细雨_林木木
10-28 6033
一、一般VUE调用图片的方法有3种： <script> //方法1.直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2.将imgUrl放在数据里 data(){ return { imgUrl:require("../assets/test.png") ...
前端获取后台图片并展示
weixin_45641100的博客
03-14 5730
方式1：可以采用云数据进行存储图片，数据库只存储url。 方式2：将图片放在项目中的img文件里，数据库存储img的相对路径。 不建议直接往数据库里存图片。
vue 下载图片
CvLebron的博客
03-08 1636
Vue中实现点击下载图片的方法可以使用HTML5中的< a >标签的 download 属性或者通过JS来实现。
vue项目图片下载到本地
行内元素如何居中
07-29 329
<template> <div> <div v-for="(item, index) in codeImg" :key="item.id"> <img :src="item.path" title="点击查看大图" alt="" /> </div> <div class="it...
vue 获取php图片报错,webpack,vue.js_webpack项目中添加了几张图片，import时报错，webpack,vue.js - phpStudy...
weixin_35117321的博客
04-07 151
webpack项目中添加了几张图片，import时报错webpack.conf.js配置代码：var path = require('path'),webpack = require('webpack'),ExtractTextPlugin = require('extract-text-webpack-plugin');var rootPath = path.resolve(__dirname,...
vue 调用图片（服务器和本地）
u011200562的博客
10-26 7366
一、本地（一般调用有三种办法） <script> //方法1.直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2.将imgUrl放在数据里 data(){ return { imgUrl:require("../assets/test.png") } } //方法3.在生命周期函数中设置 data(){
vue前端用服务器上路径的图片展示_谈谈前端性能自动化
weixin_39968640的博客
11-30 1824
前述：前段时间出了性能分析的需求，需要对前端页面性能做一套自动化测试工具。领导都发话了，那咱说干就干。花了一周时间去找资料以及匹配优秀并且合适的开源插件。花了一个月的时间(断断续续，需求也要做的~)完成了这个工具的建设和开发。目前也搭建了一套平台来支撑这样的工具使用。前端用的VUE，后端用的node(由于本人较熟悉前端)，数据库用的是mangoDB。好了，话不多说，上才艺~设计背景 & 前...
Vue如何显示linux服务器的图片
07-14
要在Vue中显示Linux服务器上的图片，你可以使用以下步骤： 1. 在Vue项目中创建一个组件，用于显示图片。你可以使用`<img>`标签来显示图片。 2. 在Vue组件的数据中定义一个变量，用于存储图片的URL。 3. 在Vue组件的生命周期钩子函数中，通过发送HTTP请求从Linux服务器获取图片的URL。 4. 使用Vue的双向绑定将获取到的图片URL赋值给定义的变量。 5. 在模板中使用该变量作为`<img>`标签的`src`属性值，以显示图片。 下面是一个简单的示例代码： ```vue <template> <div> <img :src="imageURL" alt="Server Image"> </div> </template> <script> export default { data() { return { imageURL: '' // 存储图片URL的变量 } }, mounted() { this.getImageFromServer(); // 在组件挂载后获取图片 }, methods: { getImageFromServer() { // 发送HTTP请求获取图片URL // 你可以使用Axios、Fetch或其他HTTP库来发送请求 // 假设服务器返回的数据中有一个字段名为'imageURL'，存储了图片的URL // 这里以Axios为例 axios.get('/api/getImageFromServer') .then(response => { this.imageURL = response.data.imageURL; // 将获取到的URL赋值给变量 }) .catch(error => { console.error(error); }); } } } </script> ``` 请注意，上述代码中的`/api/getImageFromServer`是一个示例URL，你需要根据你的服务器端设置进行相应的调整。 这样，当Vue组件加载后，它将发送请求到Linux服务器获取图片的URL，并将其显示在页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值