问题的说明
vue create ele命令为vue3.x创建了一个项目
cd ele
cnpm i
NPM运行服务器启动了项目
安装CNPMIelement-ui-selement-ui
修改hello world.vue (添加使用El-image及其他组件)并启动后,与El-image对应的图像显示加载失败,但更改为绝对地址即可正确加载。 不知道是什么原因!
出现问题的环境背景和自己尝试了什么样的方法
相关代码
//请在下面粘贴代码文本(请不要用图像代替代码) ) ) ) ) ) ) ) ) )。
main.js
import Vue from 'vue '
导入元素ui from ' element-ui ';
导入' element-ui/lib/theme-chalk/index.CSS ';
import App from './App.vue '
vue.use (元素ui );
Vue.config.productionTip=false
newvue({
render : h=h (APP )、
}.$mount('#app ' ) )。
App.vue
importhelloworldfrom './components/hello world.vue '
导出默认值{
name: 'app ',
组件: {
职业介绍所世界
}
}
# APP
字体系列: ' avenir ',Helvetica,Arial,sans-serif;
微信字体智能: antialiased;
- moz-OS x-font-smoothing :灰色缩放;
文本对齐3360中心;
color: #2c3e50;
margin-top: 60px;
}
./components/HelloWorld.vue
{{ msg }} Button Try Element
导出默认值{
name: 'HelloWorld ',
props: {
微软:斯特林
(,
data :功能(
返回{
visible :假,
fits: 'fill ',
URL : ' https://fus S10.elemecdn.com/e/5d/4a 731 a 90594 af 544 c 0c 25941171 JPEG.JPEG '
}
}
}
. hello {
margin :自动;
width: 80%;
border : 1px固态硬盘;
}
h3 {
margin: 40px 0 0;
}
a {
color: #42b983;
}
. dimg div {
显示: Flex;
border: 1px dashed green;
width: 200px;
height: 150px;
margin: 5px;
}
期待的结果是什么? 实际看到的错误信息是什么?
为什么这张图像加载失败了呢? 但是我觉得传球正确了。 使用img标签时,相同路径即可。 即使是同一el-image组件,src更改为绝对地址也是正确的。
另外,添加el-button和el-dialog组件也可以正常工作,所以注册组件感觉没有问题。 因为我引进了所有的组件。