vue 使用 el-image图片无法显示

问题：在vue 项目中使用 el-image 后，在图片路径无误的情况下显示图片加载失败
在这里插入图片描述

 <el-carousel trigger="click" :height="carouselHeight"><el-image src="images/top1.jpg" fit="fill" style="height:100%;width:100%"></el-image></el-carousel>

原因分析：
在这里插入图片描述
通过图片的请求可知，在element组件上使用相对路径，webpack并不会对路径进行处理，所以出现无效路径（被解析为根目录下的images）

解决方法：
图片地址用 require 拉取例：:src="require(’./images/top1.jpg’)"

<el-carousel trigger="click" :height="carouselHeight"><el-image :src="require('./images/top1.jpg')" fit="fill" style="height:100%;width:100%"></el-image>
</el-carousel>

修改图片正常显示
u

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/330244.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java本地监听zk服务器节点【动态上下线】

java本地监听zk服务器节点【动态上下线】

【README】 java本地访问 zk cluster&#xff0c; refer 2 https://blog.csdn.net/PacosonSWJTU/article/details/111404364 【1】 客户端监听 zk节点变化 1&#xff09; zk客户端代码——http访问的客户端代码&#xff08;请求zk获取 http服务器的上下线信息&#xff09;…
阅读更多...
面象对象设计6大原则之一：单一职责原则

面象对象设计6大原则之一：单一职责原则

转载自 面象对象设计6大原则之一&#xff1a;单一职责原则单一职责原则&#xff08;SRP&#xff09;&#xff0c;The Single Responsibility Principle定义一个类的修改只能有一个被修改的原因。通俗地讲&#xff0c;就是一个类只能负责一个职责&#xff0c;修改一个类不能影响…
阅读更多...
vue 实现 js css html分离

vue 实现 js css html分离

方法一 分别创建 index.js, index.css index.js: export default {data:function(){return {//...};},methods:{//...} }index.vue 代码 <template>.... </template><script> //index.js 的相对路径 import index from "./index.js";// 名字可…
阅读更多...
基于centos8搭建zookeeper集群

基于centos8搭建zookeeper集群

【README】 本文基于centos8 搭建 1&#xff0c;其他linux版本&#xff0c;命令可能不同&#xff1b; 2&#xff0c;集群包括3个节点&#xff0c;如下&#xff08;因为采用NAT模型进行网络连接&#xff0c;需要让windows和linux机器在同一个网段&#xff09;&#xff1a; ce…
阅读更多...
面象对象设计6大原则之二：开放封闭原则

面象对象设计6大原则之二：开放封闭原则

转载自 面象对象设计6大原则之二&#xff1a;开放封闭原则开放封闭原则&#xff08;OCP&#xff09;&#xff0c;The Open Closed Principle定义一个软件的实体&#xff0c;包括类、方法、模块、应该对扩展开放&#xff0c;对修改关闭。也就是说一个软件的实体应该通过扩展的方…
阅读更多...
Java 泛型实现方法 — 擦拭法

Java 泛型实现方法 — 擦拭法

所谓擦拭法是指&#xff0c;虚拟机对泛型其实一无所知&#xff0c;所有的工作都是编译器做的。 例如&#xff0c;我们编写了一个泛型类Pair&#xff0c;这是编译器看到的代码&#xff1a; public class Pair<T> {private T first;private T last;public Pair(T first, T…
阅读更多...
shell脚本启动kafka集群的多台节点

shell脚本启动kafka集群的多台节点

【README】 由于集群有多台机器&#xff0c;启动kafka &#xff0c;查看其状态&#xff0c;都需要每台机器去执行命令&#xff0c; 可以写个脚本基于ssh免密登录批量执行&#xff1b; 【1】启动kafak (kk.sh) #!/bin/bash case $1 in "start"){for i in centos201…
阅读更多...
面象对象设计6大原则之三：里氏替换原则

面象对象设计6大原则之三：里氏替换原则

转载自 面象对象设计6大原则之三&#xff1a;里氏替换原则里氏替换原则&#xff08;LSP&#xff09;&#xff0c;The Liskov Substitution Principle定义所有引用基类的地方必须能透明地引用其子类的对象&#xff0c;即子类可以拓展父类的功能&#xff0c;但不能修改父类已有的…
阅读更多...
kafka命令行操作

kafka命令行操作

【README】 kafka集群 -- kafka集群 3台机器 centos201 192.168.163.201 centos202 192.168.163.202 centos203 192.168.163.203【1】主题topic 操作命令 序号 命令 1 kafka-topics.sh -- create 新增 2 kafka-topics.sh -- list 查看列表 3 kafka-topics.sh -- d…
阅读更多...
面象对象设计6大原则之四：接口隔离原则

面象对象设计6大原则之四：接口隔离原则

转载自 面象对象设计6大原则之四&#xff1a;接口隔离原则接口隔离原则&#xff08;ISP&#xff09;&#xff0c;The Interface Segregation Principle定义客户端不需要强迫依赖那些它们不需要的接口。类与接口的依赖应该建议在最小的接口上&#xff0c;也就是说接口应该最小化…
阅读更多...
Spring 拦截器和过滤器中自动注入为 null 的原因及解决方案

Spring 拦截器和过滤器中自动注入为 null 的原因及解决方案

起因 开发过程中在过滤器&#xff08;filter&#xff09;中注入Bean出现空指针异常&#xff0c;通过查找资料了解空指针的原因&#xff0c;特此记录。 问题分析 由于其他bean在service&#xff0c;controller层注入一点问题也没有&#xff0c;开始根本没意识到Bean无法注入是…
阅读更多...
kafka命令行生产者消费者测试

kafka命令行生产者消费者测试

【README】 基于命令行开启生产者&#xff0c;消费者线程&#xff0c;测试kafka的消费转发功能&#xff1b; 【1】生产者与消费者 生产者201 [rootcentos201 logs]# kafka-console-producer.sh --topic first --broker-list centos201:9092 >hello-world >sichuan-c…
阅读更多...
面象对象设计6大原则之五：依赖倒置原则

面象对象设计6大原则之五：依赖倒置原则

转载自 面象对象设计6大原则之五&#xff1a;依赖倒置原则依赖倒置原则&#xff08;DIP&#xff09;&#xff0c;The Dependency Inversion Principle定义1、高层模块不应该依赖低层模块&#xff0c;两都应该依赖于抽象。2、抽象不依赖于具体细节。3、具体细节应该依赖于抽象。…
阅读更多...
实现简单的注解型MVC框架 —— 低配SpringMVC

实现简单的注解型MVC框架 —— 低配SpringMVC

文章目录目标最终效果展示基本步骤1. 解析控制器类&#xff1a;2. 解析处理函数&#xff1a;3. 解析处理函数变量名&#xff1a;4. 监听TCP连接&#xff1a;5. 实现路由函数&#xff1a;知识点总结目标 与SpringMvc定义Controller类似效果 最终效果展示 主类 package org.e…
阅读更多...
转：聊聊开发中幂等性问题（*）

转：聊聊开发中幂等性问题（*）

【README】 这是一篇非常棒的&#xff0c; 讲解幂等性问题的post&#xff0c; 感谢原文作者&#xff1b; 转自&#xff1a; https://juejin.cn/post/6844903815552958477 幂等 (idempotence) 的概念 幂等的数学概念 幂等是源于一种数学概念。其主要有两个定义 如果在一元运…
阅读更多...
面象对象设计6大原则之六：迪米特原则

面象对象设计6大原则之六：迪米特原则

转载自 面象对象设计6大原则之六&#xff1a;迪米特原则迪米特原则&#xff08;LOD&#xff09;&#xff0c;The Law Of Demeter&#xff0c;也称为最少知识原则定义一个对象应该对其他对象有最少的了解。也就是说一个类耦合和调用一个类应该知道的最少&#xff0c;它只关心被耦…
阅读更多...
转-Apache kafka 工作原理介绍

转-Apache kafka 工作原理介绍

转自&#xff1a; https://developer.ibm.com/zh/articles/os-cn-kafka/ 消息队列 消息队列技术是分布式应用间交换信息的一种技术。消息队列可驻留在内存或磁盘上, 队列存储消息直到它们被应用程序读走。通过消息队列&#xff0c;应用程序可独立地执行–它们不需要知道彼此的…
阅读更多...
Java内存区域（运行时数据区域）和内存模型（JMM）

Java内存区域（运行时数据区域）和内存模型（JMM）

原文作者&#xff1a;czwbig 原文&#xff1a;https://www.cnblogs.com/czwbig/p/11127124.html Java 内存区域和内存模型是不一样的东西&#xff0c;内存区域是指 Jvm 运行时将数据分区域存储&#xff0c;强调对内存空间的划分。 而内存模型&#xff08;Java Memory Model&am…
阅读更多...
kafka 学习 非常详细的经典教程

kafka 学习 非常详细的经典教程

转自&#xff1a; https://blog.csdn.net/tangdong3415/article/details/53432166 一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能&#xff0c;但具有自己独特的设计。 这个独特的设计是什么样的呢&#xff1f; 首先让我们看…
阅读更多...
一个多线程死锁案例，如何避免及解决死锁问题

一个多线程死锁案例，如何避免及解决死锁问题

转载自 一个多线程死锁案例&#xff0c;如何避免及解决死锁问题 多线程死锁在java程序员笔试的时候时有遇见&#xff0c;死锁概念在之前的文章有介绍&#xff0c;大家应该也都明白它的概念&#xff0c;不清楚的去翻看历史文章吧。 下面是一个多线程死锁的例子 输出 thread1 get…
阅读更多...
最新文章

Copyright @ 2022~2023