AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue 3 element组件el-image的坑

2023-11-30 279
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃ 发现了这个坑，立马来发个文章水一水

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃ 发现了这个坑，立马来发个文章水一水

<el-image src="../assets/logo.png"></el-image>

你以为图片就能正确加载了吗？

没错，

你将会看见

357045048.png

那么如何解决？

图片外加个require，就可以正确加载了。


正确示范


那么为什么会这样呢？

目测应该就是bug，

如果你是使用img写的话，没有带require，正常情况下能够渲染

使用img使用el-image未带require

967755471.png

没有使用require，路径有错，webpack并没有处理。

通过require，可以帮忙读取图片地址，可以解决暂时的相对路径处理问题

 

文章标签：
JavaScript
关键词：
vue3组件VUE.js
VUE.js组件
vue3 element VUE.js
element VUE.js
element组件VUE.js
DyeDD
目录
相关文章
html的七十二变
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
21 5
html的七十二变
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
17 4
CamilleKing
|
15天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
35 7
小宋1021
|
16天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
38 3
CamilleKing
|
15天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
36 1
CamilleKing
|
15天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
36 1
游客zi3qmblbcdexu
|
17天前
|
前端开发 JavaScript
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
游客zi3qmblbcdexu
33 1
zhaojiaxing123
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式，适用于任意组件间通信
zhaojiaxing123
69 0
卡尔特斯
|
缓存 JavaScript 前端开发
Vue Props、Slot、v-once、非父子组件间的传值....
Vue Props、Slot、v-once、非父子组件间的传值....
卡尔特斯
84 0
zhaojiaxing123
|
JavaScript
Vue中父子组件传值
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
zhaojiaxing123
80 0

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    一文梳理Vue3核心原理
  • 4
    【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！
  • 5
    vite原理之解析.vue文件
  • 6
    自制简单的range（Vue）
  • 7
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 8
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 9
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 10
    毕业设计｜基于NODE+VUE的校园跑腿平台系统
  • 1
    vue代码优化方案
    54
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 3
    在Vue中，子组件向父组件传递数据
    77
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    98
  • 5
    【vue3】vue3中路由hash与History的设置
    212
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1140
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    473
  • 8
    【vue】 vue2 监听滚动条滚动事件
    144
  • 9
    【天地图】vue 天地图 T is not defined
    176
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    616

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件
    • 下一篇
    阿里云OSS设置跨域访问