element ui 图片加载失败_vue 3.x 中使用element-ui时, 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
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组件,也是正常运行的, 所以感觉组件的注册应该是没问题的, 因为我是引入全部组件了!
element ui 图片加载失败_vue 3.x 中使用element-ui时, el-image图片加载失败!!相关推荐
- jsp怎么从后台读取远程共享文件夹下的图片在前端显示_Vue后台项目中遇到的技术难点以及解决方案
作者:yeyan1996 转发链接:https://juejin.im/post/5c76843af265da2ddd4a6dd0 写在前面 金三银四招聘时间已经过去,很多公司开启了今年第二轮招聘的热 ...
- 背景图片用css能隐藏吗,用css实现鼠标悬停时隐藏背景图片的问题
用css实现鼠标悬停在导航文字连接上时隐藏导航的背景图片 为什么我的鼠标悬停在导航上时,背景图片还在啊? css代码如下: body{ margin:0; padding:0; background: ...
- Eclipse中写jsp文件时，发现里面加载不了js文件和css文件（解决css文件在eclipse中显示不了）
今天在做项目的时候,在项目中新建jsp文件和js文件和css文件,启动服务器,访问页面,加载不到js文件和css文件:(文件存在) jsp文件部分代码如下: <link rel="st ...
- android 判断webview加载成功,Android：如何检查使用webview.loadUrl时url的成功加载
不幸的是,目前在WebView中没有简单的方法来确保页面上的所有内容都已成功加载.我们希望在未来的版本中提供更好的API.让我解释一下你现在可以做什么. 首先,为了检测阻止WebView连接服务器加载 ...
- selenium中启动firefox浏览器时设置代理、加载配置文件、加载某个插件以及firefox没有安装在默认路径下的代码写法
selenium 中启动firefox浏览器的六种方式,所用的是java 1.如果浏览器没有安装在默认路径下,则用 System.setProperty("Webdriver.firefox ...
- asp如何将图片文件上传到mysql数据库中_怎样才能利用ASP把图片上传到数据库
欢迎来到小编的文章进行学习阅读,想必大家又有很多问题吧,在这里会有你想要收获的答案,请大家慢慢学习吧! ASP(Active Server Pages)是Microsoft很早就推出的一种WEB应用程 ...
- mybatis中(Oracle)关于insert时主键自动加1的使用方法
<insert id="insert" paramType="User"> <selecKey keyProperty="id&qu ...
- python爬取图片失败显示404_python3.7中Web抓取时出现http404错误
我收到404错误代码(如下所示)当尝试对某个网站进行网页抓取时.在 我试着在不同的论坛上寻找答案,但找不到解决办法 有人有解决方案来修复这个404错误吗?>>> from urlli ...
- Android中关于Volley的使用（二）加载Json数据
前面一篇关于Volley的文章中,我们学习了如何利用ImageRequest去网络中加载图片,那么今天我们就来学习一下如何利用volley去网络中加载Json格式数据,并将其展示在一个ListView ...
最新文章
- Apache、Nginx、Tomcat、PHP的区别
- python中并发编程基础1
- 怎样判断RadioButtonList控件是否有选择
- python中的简单while循环及逻辑运算符
- WHEN OVERSEAS
- 双城生活，一种相对无奈且幸福的选择
- Linux的应用领域
- 二路归并排序简介及其并行化
- mysql执行提交与回滚
- pytorch3d代码解释：pytorch3d.structures.meshes之verts_list, verts_packed, verts_padded
- tnl 的 masterServer, client server 架构学习笔记
- 【校园网环境下知网研学下载文献出现“下载文献 当前IP没有获取权限或服务器异常”处理办法】
- 使用Android拨打电话功能
- 解决：id you register the component correctly? For recursive components, make sure to provide the “name
- 还在找各种便签软件？Windows10自带的便签足矣
- 关于mailx邮件发不出去的解决办法
- PHP超全局变量之$_GETT和$_POST
- 数字时钟程序c语言,C语言实现电子时钟程序
- S5PV210-uboot源码分析-第二阶段
- 解决Win10中MSCOMM32.ocx没注册问题