问题描述

vue create ele 命令创建了一个vue3.x的项目

cd ele

cnpm i

npm run serve 把项目跑起来

cnpm i element-ui -S 安装element-ui

修改HelloWorld.vue(增加使用el-image及其他组件), 跑起来后, el-image对应的图片显示加载失败, 但如果换成绝对地址就能正确加载, 不知道什么原因!

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

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 = false

new Vue({

render: h => h(App),

}).$mount(‘#app’)

App.vue

import HelloWorld from ‘./components/HelloWorld.vue’

export default {

name: ‘app’,

components: {

HelloWorld

}

}

#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;

}

./components/HelloWorld.vue

{
{ msg }}

Button

Try Element

export default {

name: ‘HelloWorld’,

props: {

msg: String

},

data: function() {

return {

visible: false,

fits: ‘fill’,

url: ‘https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg’

}

}

}

.hello {

margin: auto;

width: 80%;

border: 1px solid red;

}

h3 {

margin: 40px 0 0;

}

a {

color: #42b983;

}

.dimg div {

display: flex;

border: 1px dashed green;

width: 200px;

height: 150px;

margin: 5px;

}

你期待的结果是什么？实际看到的错误信息又是什么？

为什么这个图片会加载失败呢, 但是感觉路径 已经正确了呀,用img标签,同样的路径是OK的. 同样的el-image组件, src换成绝对地址也是正确的!

另外添加了el-button和el-dialog组件,也是正常运行的, 所以感觉组件的注册应该是没问题的, 因为我是引入全部组件了!