vue 3.x 中使用ele-image时相对路径的图片加载失败
参考文档: https://element.eleme.cn/#/zh-CN/component/installation
环境: Mac OS X 10.12
[zcm@ele 2]$node -v
v12.6.0
[zcm@ele 3]$npm -v
6.9.0
[zcm@ele 4]$cnpm -v
cnpm@6.1.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.10.2 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@12.6.0 (/usr/local/Cellar/node/12.6.0/bin/node)
npminstall@3.22.1 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
darwin x64 16.7.0
registry=https://r.npm.taobao.org[zcm@ele 6]$vue -V
3.9.2
创建项目: vue create ele
cd ele
cnpm i
npm run serve
项目目录结构:
安装element: vue add element
修改main.js
import Vue from 'vue'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue'Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
修改App.vue
<template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'app',components: {HelloWorld}
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
修改 ./components/HelloWorld.vue
<template><div class="hello"><h1>{{ msg }}</h1><div><img class="dlogo" :src="src" /><img class="dlogo" src="../assets/logo.png" /></div><div><el-image class="dlogo" :src="src"></el-image><el-image class="dlogo" src="@/assets/logo.png"></el-image><el-image class="dlogo" src="../assets/logo.png"></el-image><el-image class="dlogo" src="/images/logo.png"></el-image></div></div>
</template><script>export default {name: 'HelloWorld',props: {msg: String},data: function () {return {src: require('@/assets/logo.png')// src: "../assets/logo.png"}},created (){// console.log(this.src);}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {display: flex;flex-direction: column;
}h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}.dlogo {border: 1px dashed red;height: 100px;
}
</style>
最终浏览器上运行结果:
能正常显示的图片对应的地址是:
总结:
1. assets目录下的资源文件在使用时要用require() 处理下,因为webpack打包时路径发生了变化!
2. 只有public下的文件,是原样打包的!
vue 3.x 中使用ele-image时相对路径的图片加载失败相关推荐
- [html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢?
[html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢? 当默认图也失效,就会陷入死循环,需加变量计数,如果是 vue 的话用 @error.once 更妙.在 onerror 给元 ...
- vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法 前言 本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 原理 ...
- 当图片加载失败时,做处理(onerror)(vue)
问题:在写项目时,使用的img标签总会遇到一些奇奇怪怪的图片,不是加载慢就是加载不出来,所以我们做相应的处理,就能使得用户体验更好了 解决: 给img标签一个onerror失败事件,在图片加载失败时做 ...
- bug解决-Vue中img图片加载失败解决方案
Vue 中img图片加载失败解决方案 bug:assets文件下的图片动态取得话,显示不出来. 解决方法:把图片放到public文件夹下 public是直接原封不动打包到dist里面
- html中加载图片失败,图片加载失败如何用默认图片代替
背景:图片资源加载不出来时用默认图片替换 解决方法: 一,用js方法onerror: 1,直接在html标签中使用 复制代码 2,原生js方法: document.getElementById(' ...
- 图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示 我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片 1.监听图片的 er ...
- vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
- img图片加载失败时,展示默认图片的方法
1. 图片加载失败时会触发onerror事件,可以通过onerror事件使默认图片代替加载失败的图片 <img src="要展示的图片的地址" onerror="t ...
- img图片加载失败时的处理
当想对图片加载失败时进行特殊处理,可以使用onerror事件,里面为需要执行的代码. 如果由于其他原因导致onerror事件里加载图片时又报错,此时有可能会导致栈溢出而弹框报错,我们只需在inerro ...
最新文章
- 6 OC中 isa 和 superclass 的总结
- C++知识点18——使用C++标准库(vector的增长与迭代器失效)
- android edittext设置内容为空,android – 我将EditText的InputType设置为TYPE_NULL后无法更改...
- 学前教育试题库及答案_最新《学前教育学》专科-试题库及答案资料
- jsf 导航_JSF页面导航示例教程
- P版openstack-nova-compute中日志报错无法同步resource_provider
- ssq历史红蓝冷热号回归测试各个期与若干分析周期的中奖率(红号出现3个以上再输出)
- bzoj 1864 三色二叉树
- MYSQL基础(sql语句)
- web前端学习26(锚点链接)
- git无法push大文件:this exceeds GitHub‘s file size limit of 100.00 MB
- tf.nn,tf.layers, tf.contrib模块介绍
- 《花花刑警》“型警造型”全身名牌
- java控制鼠标操作一些重复的事情
- 计算机excel阶乘,Excel利用VBA计算阶乘
- ET篇:master消息机制介绍(一般消息的流转)
- 什么双机热备? 为什么要做双机热备? 双机热备有哪几种?
- 每天学一点AS3.0(五)---声音的控制(5)
- 触目惊心!2017年化工行业事故203起死亡238人!附重大事件回顾
- 报童问题求解最大利润_利用二次函数求图形面积最值问题,注意自变量,学会解题策略...
热门文章
- Firefox 5 公开测试下载
- 广播多路访问链路上的OSPF
- asp.net)js 在当前日期上加一天和系统发布
- 创建react应用程序_通过构建电影搜索应用程序在1小时内了解React
- 如何使用HTML,CSS和JavaScript构建技巧计算器
- istio 和 kong_如何启动和运行Istio
- chrome麦克风权限_如何在Chrome扩展程序中处理麦克风输入权限和语音识别
- JavaScript正则表达式快速简单的指南
- 分布式 知乎 github_如何使用GitHub本机功能来帮助管理中型分布式团队
- 在哪能找到陌生人聊骚_如何说服陌生人帮助您找到工作