element-plus 的el-img组件访问oss图片自动拼接前端地址

最新推荐文章于 2024-07-27 16:31:17 发布
最新推荐文章于 2024-07-27 16:31:17 发布
阅读量761 收藏 8
点赞数 7
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55272229/article/details/136397332
版权
文章讨论了在使用ElementUI的el-image组件时，由于CDN加速和服务器配置可能导致前端请求的URL被修改。解决方法是需要手动处理URL拼接，以确保组件正确加载图片。
摘要由CSDN通过智能技术生成

这是我的组件代码

	<el-image style="width: 100px; height: 100px" :src="scope.row.logo" />

访问时候 竟然凭借上了前端的地址端口
在这里插入图片描述

原来是我的oss服务是使用了域名做cdn加速的
内容分发网络（CDN）或者服务器配置，可能存在一些重写规则或配置el-img组件无法识别，就自动将请求的URL修改或添加前缀。

解决办法

手动拼接
在这里插入图片描述

蓝胖子不是胖子
关注
element-ui upload上传非图片文件显示自定义图标
qying的博客
07-04 4568
vue2 + jQuery + element-ui upload上传非图片文件显示自定义图标详细教程
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
weixin_39876592的博客
12-19 8102
项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的图片上传方式，在这总结分享一下，有什么建议或者意见，请大家踊跃提出来。没有业务场景的功能都是耍流氓，那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面，有一些商品名称、信息等字段，还有需要上传商品轮播图的需求。我们就以Vue、Element-ui，封装组件为例子聊聊如何实现这个功能。其他框架或者不用框架实现...
elementUI 使用el-image图片组件的问题
weixin_39725702的博客
06-21 262
elementUI组件，使用el-image有时候加载不出图片，显示了默认图
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3+element-plus 实现图片图片
最新发布
m0_69551472的博客
07-27 907
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存// console.log('上传文件', formModel.value)超详细URL.createObjectURL,还有例子!!!还有对比FileReader.readAsDataURL(file)
el-image的正确使用方法，URL方式
2301_80826391的博客
06-30 334
【代码】el-image的正确使用方法，URL方式。
vue3 element plus 中el-image本地图片加载失败，路径问题
qq_43378240的博客
09-12 2185
src那里要用require包起来，这样就行了。
关于ElementUI-upload组件中action填写相对路径，会自动拼接主机名
m0_57176999的博客
10-19 577
vue,elementui,前端，chatgpt，upload，action
vue 上传图片到腾讯云对象存储
且听风吟的博客
02-18 4814
需求：上传图片到腾讯云对象存储，拿到图片地址，以供查看图片使用。 大概流程： 腾讯云对象存储（Cloud Object Storage，COS）是腾讯云提供的一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。 COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入，实现了海量数据存储和管理。通过 COS 可以进行任意格式文件的上传、下载和管理。 官网：https://cloud.tencent.c
前后端分离项目知识汇总（阿里云Oss，EasyExcel，视频点播，SpringCloud，Redis，Nuxt）
m0_67402235的博客
06-21 988
全栈开发流程以下是response对象的属性和方法所以说，response就是代表接口返回的数据在看我们后端定义的接口这样功能就实现了补充下分页条实现方式分页条因为我分页条和表单在同一页面，所以写在同一组件下因为我分页条和表单在同一页面，所以写在同一组件下主要是js对象和java对象的问题，注意区分即可其余的也是直接用element-ui组件直接拿过来改改数据有了查询对象之后把查询对象传入我们写的获取讲师列表即可我们在查询按钮绑定方法测试3、定义增加API4、引入js，写vue页面5、测试6、补充增加和修改
谷粒商城基础篇
apple_52138126的博客
03-06 2723
大哥的笔记
elementUi中的el-upload结合el-image预览图片
qq_36958916的博客
11-03 1203
elementUi中的el-upload结合el-image预览图片
关于el-image动态引入图片
weixin_42636959的博客
09-11 1525
切记要require()去拼地址，如果require无效则需要引入npm的require，如何引入则借用大佬的博客。 https://blog.csdn.net/u013465194/article/details/86105833 vuecli中不能使用require解决
VUE-25 element获取服务器图片
m0_59214979的博客
10-18 873
本节：element获取服务器的图片 1.div，用element写内容，不是和数组一样，循环指向就可以导出图片，而是需要用<template slot-scope= "scope">标签，加上服务器地址+scope.row.数组具体指向,才可以导出图片。 <el-table-column prop="address" label="图片"> <template slot-scope="scope"><img...
element-plus中 el-image :src属性发送get请求
weixin_52457745的博客
12-13 3156
:src发送的Get请求问题
element-plus el-upload简单自定义上传组件
m0_47668952的博客
12-22 5245
element-plus el-upload
vue，el-image 图片引入根路径@无效
北海_南风
07-18 1767
用于引入模块、JSON、或本地文件。可以从node_modules引入模块。require是运行时调用，所以require理论上可以运用在代码的任何地方。图片在根路径下，如下引用图片路径发现无效，图片显示“加载失败”这样就能正常引入图片了。...
element-ui 上传图片到阿里云oss
01-12
3. 创建上传组件：在 Vue 组件中，使用 Element-UI 的 `el-upload` 组件来实现图片上传功能。可以设置 `action` 属性为阿里云 OSS 的上传地址，`before-upload` 属性来处理上传前的逻辑。 4. 在上传前进行签名：在 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝胖子不是胖子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值