element ui 图片加载失败_vue 3.x 中使用element-ui时, el-image图片加载失败!!「建议收藏」

element ui 图片加载失败_vue 3.x 中使用element-ui时, el-image图片加载失败!!「建议收藏」问题描述vuecreateele命令创建了一个vue3.x的项目cdelecnpminpmrunserve把项目跑起来cnpmielement-ui-S安装element-ui修改HelloWorld.vue(增加使用el-image及其他组件),跑起来后,el-image对应的图片显示加载失败,但如果换成绝对地址就能正确加载,不知道什么原因!问题出现的环境背景及…

大家好,又见面了,我是你们的朋友全栈君。

问题描述

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

Vue logo

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 }}

logo.png

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组件,也是正常运行的, 所以感觉组件的注册应该是没问题的, 因为我是引入全部组件了!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143069.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号