參考文檔： https://element.eleme.cn/#/zh-CN/component/installation

環(huán)境: 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

創(chuàng)建項(xiàng)目:?vue?create?ele

cd?ele

cnpm?i

npm?run?serve

項(xiàng)目目錄結(jié)構(gòu)：

安裝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>

最終瀏覽器上運(yùn)行結(jié)果：

能正常顯示的圖片對應(yīng)的地址是：

總結(jié)：

1. assets目錄下的資源文件在使用時(shí)要用require() 處理下，因?yàn)閣ebpack打包時(shí)路徑發(fā)生了變化！

2. 只有public下的文件，是原樣打包的！

?

?

總結(jié)

以上是生活随笔為你收集整理的vue 3.x 中使用ele-image时相对路径的图片加载失败的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。