首页 > 编程知识 正文

el-upload上传图片,vue背景图片加载不出来

时间:2023-05-05 13:27:52 阅读:41362 作者:1

问题的说明

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组件也可以正常工作,所以注册组件感觉没有问题。 因为我引进了所有的组件。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。