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下的文件,是原样打包的!

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402423.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript函数绑定

一个简单的函数绑定 在JavaScript与DOM交互中经常需要使用函数绑定&#xff0c;定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上&#xff0c;绑定函数经常和回调函数及事件处理程序一起使用&#xff0c;以便把函数作为变量传递的同时保留代码执行环境。 <…

ie6兼容问题汇总

这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间&#xff0c;参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下&#xff0c;也方便我日后再用到&#xff1a; 1.IE的cache设置为Every visit to the page&#xff0c;而不是默认的Automatically。基本…

Linux C 数据结构---线性表

数据结构指的是数据元素及数据元素之间的相互关系&#xff0c;包含下面三方面的内容&#xff1a; 其中&#xff0c;线性表是最基本、最简单、也是最常用的一种数据结构。线性表中数据元素之间的关系是一对一的关系&#xff0c;即除了第一个和最后一个数据元素之外&#xff0c;其…

Postman发送请求时带上登录信息

正常情况下&#xff0c;没有登录验证等公共接口&#xff0c;用postman进行get或post请求都很方便&#xff0c;加上相应的参数就行。 但是对于某些接口&#xff0c;可能需要先登录后才能请求&#xff0c;这时如果按正常的思路请求&#xff0c;可能就会被拦截了。 对于这种情况…

Chrome跨域问题

2019独角兽企业重金招聘Python工程师标准>>> 在chrome图标&#xff0c;右键--->属性 --->目标 路径末尾添加 “--disable-web-security” 重启即可 转载于:https://my.oschina.net/u/861562/blog/152171

解决安装mysql的”A Windows service with the name MySQL already exists.“问题

如果以前安装过mysql&#xff0c;卸载重装&#xff0c;很可能会碰到”A Windows service with the name MySQL already exists.“这样的提示。即服务已经存在。我们可以在window任务管理器----服务中查看&#xff0c;发现确实存在&#xff0c;没有卸载干净。 解决这个问题&…

[vue] 父子组件间传值

环境说明: vue 3.x ant-vue 父组件(Album.vue)使用: <template><div><a-button type"primary" icon"plus" click"uploadImage">图片</a-button><upload-image :visible.sync"visible"></upload-i…

Linux C 数据结构---单向链表

线性表存储结构分为顺序存储、链式存储。 顺序存储的优点&#xff1a; 顺序存储的缺点&#xff1a; 链表就是典型的链式存储&#xff0c;将线性表L &#xff08;a0,a1,a2,........an-1&#xff09;中个元素分布在存储器的不同存储块&#xff0c;成为结点&#xff08;Node&…

杂感

成功的IT大佬&#xff0c;我读着沸腾十五年&#xff0c;激荡三十年&#xff0c;知识英雄&#xff0c;满腔热血&#xff0c;梦想真的是个好东西&#xff0c;让你在这个国度不至于行尸走肉。走上编程这条路&#xff0c;有人因走投无路而走此路&#xff0c;有人怀抱着梦想&#xf…

分页插件--根据Bootstrap Paginator改写的js插件

刚刚出来实习&#xff0c;之前实习的公司有一个分页插件&#xff0c;和后端的数据字典约定好了的&#xff0c;基本上是看不到内部是怎么实现的&#xff0c;新公司是做WPF的&#xff0c;好像对于ASP.NET的东西不多&#xff0c;导师扔了一个小系统给我和另一个同事&#xff0c;指…

sprintboot 配置文件上传大小(默认是1MB)

application.yaml: spring:profiles:active: activatedjackson:date-format: yyyy/MM/dd HH:mm:sstime-zone: GMT8servlet:multipart:max-file-size: 6MBmax-request-size: 6MB

Android ANR

ANRs (“Application Not Responding”)&#xff0c;意思是”应用没有响应“。 1&#xff09;什么引发了ANR&#xff1f;在Android里&#xff0c;应用程序的响应性是由Activity Manager和WindowManager系统服务监视的。当它监测到以下情况中的一个时&#xff0c;Android就会针对…

Linux C 算法分析初步

提到算法&#xff0c;必须提到数据结构&#xff0c;我们要知道一个著名公式&#xff1a; 数据结构 算法 程序 我们先看看下面这张图&#xff1a; 算法是什么&#xff1f;算法是一个有穷规则&#xff08;或语句、指令&#xff09;的有续集和。他确定了解决某一问题的一个运算序…

hive实例,GPRS流量统计

2019独角兽企业重金招聘Python工程师标准>>> 最近面试&#xff0c;发现很多公司在使用hive对数据进行处理。 hive是hadoop家族成员&#xff0c;是一种解析like sql语句的框架。它封装了常用MapReduce任务&#xff0c;让你像执行sql一样操作存储在HDFS的表。 hive的表…

90.不用其它变量进行变量互换

package com.chongrui.test;//不用其它变量进行变量互换import java.util.Scanner; //导入扫描器public class test { public static void main(String[] args){ Scanner scan new Scanner(System.in);//创建扫描器 System.out.println("请输入变量A的值");//输入变…

android中 MediaStore提取缩略图和原始图像

android中 MediaStore提取缩略图和原始图像 . 欢迎转载&#xff1a;http://blog.csdn.net/djy1992/article/details/10005767提取图像的Thumbnail 1) 启动Intent Intent intent new Intent(Intent.ACTION_GET_CONTENT, null); intent.setType("image/*"); intent.pu…

Linux C 数据结构—-循环链表

前面我们学习了单向链表&#xff0c;现在介绍单向循环链表&#xff0c;单向循环链表是单链表的一种改进&#xff0c;若将单链表的首尾节点相连&#xff0c;便构成单向循环链表结构&#xff0c;如下图&#xff1a; 对于一个循环链表来说,其首节点和末节点被连接在一起。这种方式…

预备作业03 20162320刘先润

第一次编代码 这几周自学了Linux基础入门&#xff0c;有好多想吐槽的地方&#xff0c;所以这篇随笔是带有半吐槽性质的&#xff0c;这是我学完后最真实的感受 我在电脑上按照教程安装了虚拟机&#xff0c;对于Linux这个完全陌生的概念也稍微算是有些理解&#xff0c;但是还有很…

JTable 失去焦点时取消编辑状态

为什么80%的码农都做不了架构师&#xff1f;>>> reference&#xff1a; http://tips4java.wordpress.com/2008/12/12/table-stop-editing/ 当JTable的单元格处于编辑状态时&#xff0c;如果用户触发以下事件&#xff0c;表格就会退出编辑状态&#xff0c;进而调用T…

JS中的array和Object的区别

区别&#xff1a; 数组表示有序数据的集合&#xff0c;对象表示无需数据的集合。如果数据顺序很重要的话&#xff0c;就用数组&#xff0c;否则就用对象的好。 数组的数据没有名称name 对象的数据有名称 name 但是在很多编程语言中有个叫关联数组的&#xff0c;这种数组中的…