大家好，又见面了，我是你们的朋友全栈君。
问题描述
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 }}
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组件,也是正常运行的, 所以感觉组件的注册应该是没问题的, 因为我是引入全部组件了!
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143069.html原文链接：https://javaforall.net
