vue 中`el-avatar` `v-img` src的加载方式

最新推荐文章于 2024-06-19 08:27:51 发布
最新推荐文章于 2024-06-19 08:27:51 发布
阅读量5.2k 收藏 8
点赞数 10
分类专栏： vue element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44852765/article/details/107838803
版权

在做vue + element-ui项目时, 用到el-avatar 用绝对路径显示不出来
开始代码
在这里插入图片描述
修改后代码
在这里插入图片描述

<!-- 正常加载 -->
<el-avatar :src="require('../../assets/img/tou.jpg')"></el-avatar>
<v-img :src="require('../../assets/logo.png')" />
<!-- 正常加载 -->
<el-avatar src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
<!-- 无法加载 -->
<el-avatar :src="../../assets/img/tou.jpg"></el-avatar>
<!-- 正常加载 -->
<img src="../../assets/img/tou.jpg" alt="头像" >
方程式1002
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue循环渲染vuetify组件库中的v-img标签 -- src本地路径问题
Guo_bk_1228的博客
07-28 533
<!-- HTML --> <div class="item" v-for="(item,index) in lookupList" :key="index"> <div class="topbox"> <div >{{$t(item.cname)}}</div> <v-img contain max-height="25px" max-width="60px" :src="item.logoPath"></v
vue-avatar, vue.js的化身组件.zip
09-17
vue-avatar, vue.js的化身组件 vue头像 vue.js.的化身组件这里组件显示一个头像图像，如果没有提供给用户的姓名缩写。 这个组件来自于 react-user-avatar 。用于计算用户姓名首字母的规则：在空格和连字符上划分用户名使用每个部件的第一
el-avatar插入本地图片三步走
qq_63123724的博客
05-23 236
第一步，导入本地位置。
vue中循环渲染img标签中的src(亲测有效)
imkaifan的博客
01-29 2306
vue中循环渲染img标签中的src 先上效果图 template部分： <div class="avatar_list"> <img v-for="(item,index) in imgs" :key="index" class="avatar" :src="require(`../assets/nenglitupu/${item.src}.png`)" alt=""> </div> data
【区分vue2和vue3下的element UI Avatar 头像组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
06-19 775
在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中，Avatar头像组件可能并没有直接作为官方组件库的一部分。然而，为了回答你的问题，我将假设 Element UI 和 Element Plus 在未来的版本中可能添加了Avatar组件，或者我们将使用一个类似的第三方组件或自定义组件作为例子。
v-img的功能
weixin_40945354的博客
09-07 554
<!DOCTYPE html> <body> <div id="app"> <img src="./Users/ivyone/Desktop/bg.jpeg" v-img> </div> <script src="https://unpkg.com/vue@next"></script> <script> const vm = Vue.createApp({ data() { return
vue el-avatar 使用require提示无法找到图片
lin85253788的博客
03-07 501
vue初始化DOM树时没有挂载数据,导致无法找到模块。
el-avatar入门学习
qq_40765784的博客
06-17 4316
el-avatar入门使用
解决Element UI的Avatar 头像组件引用图片的问题
Tiger_Paul的博客
02-19 5951
解决Element UI的Avatar 头像组件引用图片的问题
解决vue中el-tab-pane切换的问题
10-15
在Vue开发过程中，Element UI库提供了丰富的UI组件，其中`el-tabs`组件用于实现标签页切换功能。在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题...
关于vue v-for循环解决img标签的src动态绑定问题
10-18
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
在Vue.js中，`el-tab-pane` 是 Element UI 框架中的一个组件，用于创建选项卡式布局。然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是...
解决vue的 v-for 循环中图片加载路径问题
10-18
可以使用Vue的懒加载库如`vue-lazyload`。 3. **图片不存在**：确保后台返回的图片名称与实际存在的图片文件名一致。 4. **网络跨域**：如果图片资源不在同一个域下，可能存在跨域问题。可以使用`CORS`（跨源资源...
Vue的el-scrollbar实现自定义滚动
09-20
本篇文章给大家分享了Vue的el-scrollbar实现自定义滚动实现的过程和实例代码，对此有需要的朋友可以参考下。
Vue 使用 el-avatar 头像无法直接加载本地图片问题
幻辰科技 nbhctec.com
05-24 2918
Vue 使用 el-avatar 头像无法直接加载本地图片问题
优雅处理图片加载失败
lyd的博客
07-03 670
环境： vue2.6.6 element-ui2.13.2 问题： 用户头像图片加载失败，显示异常难看，难看的失败图标。 解决： 使用element-ui的Avatar组件 <template> <el-avatar :src="photoUrl" size="small"> {{ name.substring(0,1) }} </el-avatar> </template> <script> export default {
运用el-avatar显示图片/头像
前端职场小白_炜晨科技的博客
09-30 3931
运用el-avatar显示图片/头像
vue中根据用户昵称首字母生成头像和颜色
ju__ju的博客
05-29 6132
需求:项目中需要做一个粗糙的评论板块,用户评论时需要显示头像,但是不需要去更换改头像 思路:用户昵称首字母作为头像,并且根据用户首字母生成固定的颜色,否则每次颜色都会随机 例如: 1.安装头像插件 npm install vue-avatar 2.引用 //template部分 <Avatar :username="name" :src="name" :background-color="extractColorByName(name)" color="#fff" style="vertical-
Element ui Avatar头像管理组件 实现当用户没有头像时 以名称最后一个字为头像
weixin_45966674的博客
01-29 1352
因为上面 我们定义了 他的 class 为 avatar 然后我们通过这个类名 定义他的样式 和他下面图片 img的样式。其实这个组件自己做也比较简单 就是判断 如果src没传进来 展示下面的文本就好了 但element ui这有个现成的。这里我们用v-if 判断 如果item.images有值 代表是有头像的 就直接用src。可以看到 没有头像的 对应位置就会展示出 名字的最后一个字。简单说 就是取传进来的值 的最后一个字。src控制他的图片展示。
vue中如何能够在el-table-column显示图片
05-22
在 Vue 中，可以通过在 `el-table-column` 中使用插槽（slot）来自定义列的内容。要在列中显示图片，可以在插槽中添加 `img` 标签。 以下是一个示例代码： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="avatar" label="头像"> <template slot-scope="scope"> <img :src="scope.row.avatar" width="50" height="50"> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', avatar: 'https://example.com/avatar1.png' }, { name: '李四', avatar: 'https://example.com/avatar2.png' }, { name: '王五', avatar: 'https://example.com/avatar3.png' } ] } } } </script> ``` 在上述代码中，我们在 `el-table-column` 中添加了一个插槽，使用了 `scope` 作为插槽的参数。通过 `scope.row.avatar` 获取到该行数据中的头像地址，并将其作为 `img` 标签的 `src` 属性值。 注意：在 Vue 中，我们可以使用 `v-bind` 指令简写为 `:`，例如 `:src` 等价于 `v-bind:src`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值