vue如何动态加载本地图片
大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势。
以下正文:
今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章。
通常,我们的一个img标签在html中是这么写的:
<img src="../images/demo.png">
这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话,这类资源将会直接被拷贝,而不会经过 webpack 的处理。
如果src是变量的话,我们一般会在data中定一个变量src进行动态绑定。
<img :src="src">
//data中定义变量src
data() {
return {
src: '../images/demo.png'
}
}
然而这时候,会发现这个时候图片并没有被加载出来,图片没有显示出来,通过查看发现这张图片的地址显示 ../images/demo.png
,也就是说通过v-bind形式绑定的相对路径不会被webpack的file-loader
处理,只会做简单的文本替换。
那怎么办呢?
解决方法
1、将图片转**base64
**格式
<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">
一般图片比较小的可以这么做,比如图标icon等,大小一般在10KB以内的。
2、使用**import
**引入图片
<img :src="src">
//使用import引入
import img from '../images/demo.png'
//data中定义变量src
data() {
return {
src: img
}
}
3、使用**require
**动态加载
<img :src="src">
//data中定义变量src
data() {
return {
src: require('../images/demo.png')
}
}
4、引入**publicPath
**并且将其拼接在路径中,实现引入路径的动态变动
<img :src="publicPath + 'images/demo.jpg'" alt=""> // √
// 编译后:
<img src="/foo/images/demo.jpg" alt="">
<script>
export default:{
data(){
return {
publicPath: process.env.BASE_URL,
}
},
}
</script>
在vue.config.js
中配置publicPath
路径:
//vue.config.js
module.exports = {
publicPath:'/foo/',
...
}
结论
静态资源可以通过两种方式进行处理:
-
在 JavaScript
被导入
或在 template/CSS 中通过相对路径
被引用。这类引用会被 webpack 处理。 -
放置在
public
目录下或通过绝对路径
被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。
原理
从相对路径导入
当你在 JavaScript、CSS 或 *.vue
文件中使用相对路径 (必须以 .
开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中。
在其编译过程中,所有诸如 <img src="...">
、background: url(...)
和 CSS @import
的资源 URL 都会被解析为一个模块依赖。
用绝对路径引入时,路径读取的是public
文件夹中的资源,任何放置在 public
文件夹的静态资源都会被简单的复制到编译后的目录中,而不经过 webpack特殊处理。
当你的应用被部署在一个域名的根路径上时,比如http://www.abc.com/
,此时这种引入方式可以正常显示但是如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀,publicPath
是部署应用包时的基本 URL,需要在 vue.config.js
中进行配置。
扩展
关于vue file-loader vs url-loader
如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。
其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用
file-loader
解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。
**url-loader和file-loader是什么关系呢?**简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。通过上面的介绍,我们可以看到,url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
原文链接:www.cnblogs.com/weizaiyes/p…
关于background url引入图片时
按照上面理论,如果我采用相对路径的方式引入图片的话,webpack会对其require处理。
background: url('./iphonexs.png') 0 0 no-repeat;
实际上确实如此,我看到页面的背景变成:
background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;
这是根据url-loader的配置处理的结果。
或者采用动态style
的方式:
<div
:style="{'background': 'url(' + require('./iphonexs.png') + ') 0 0 no-repeat'}">
</div>
Reference
-
cli.vuejs.org/zh/guide/ht…
-
segmentfault.com/a/119000001…
-
github.com/vuejs/vue-c…
(完)
如果有问题可以帮我指出,感谢!
--- End ---
你好,我是前端队长Daotin,专注分享前端与认知。希望在这里,和你分享我的前端学习和工作经验,记录个人成长。
想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势。
推荐阅读
-
Vue3+Nuxt3 从 0 到 1 建立官方网站项目(搜索引擎优化搜索、中英文切换、图片懒加载)
-
Vue 3.0 如何封装全局 Loading 或弹出框,以及如何获取动态呈现的节点以供操作
-
找出图片加载事件(onload)、加载状态(完成)、实现图片的本地预览后,并适应父元素(完成)
-
使用 vue3+vite 资产动态引入图片并解决打包后显示图片问题的三种方法
-
采访者Glide 如何加载 GIF 动态图形?
-
Java 类加载器的作用 - 简介:类加载器是 Java™ 中一个非常重要的概念。类加载器负责将 Java 类的字节码加载到 Java 虚拟机中。本文首先详细介绍了 Java 类加载器的基本概念,包括代理模型、加载类的具体过程和线程上下文类加载器等。然后介绍了如何开发自己的类加载器,最后介绍了类加载器在 Web 容器和 OSGi™ 中的应用。 类加载器是 Java 语言的一项创新,也是 Java 语言广受欢迎的重要原因之一。它允许将 Java 类动态加载到 Java 虚拟机中并执行。类加载器从 JDK 1.0 开始出现,最初是为了满足 Java Applets 的需求而开发的,Java Applets 需要从远程位置下载 Java 类文件并在浏览器中执行。现在,类加载器已广泛应用于网络容器和 OSGi。一般来说,Java 应用程序的开发人员不需要直接与类加载器交互;Java 虚拟机的默认行为足以应对大多数情况。但是,如果遇到需要与类加载器交互的情况,而您又不太了解类加载器的机制,就很容易花费大量时间调试异常,如 ClassNotFoundException 和 NoClassDefFoundError。本文将详细介绍 Java 的类加载器,帮助读者深入理解 Java 语言中的这一重要概念。下面先介绍一些基本概念。 类加载器的基本概念 顾名思义,类加载器用于将 Java 类加载到 Java 虚拟机中。一般来说,Java 虚拟机以如下方式使用 Java 类:Java 源程序(.java 文件)经 Java 编译器编译后转换为 Java 字节代码(.class 文件)。类加载器负责读取 Java 字节代码并将其转换为 java.lang 实例。每个实例都用来表示一个 Java 类。通过该实例的 newInstance 方法创建该类的对象。实际情况可能更加复杂,例如,Java 字节代码可能是由工具动态生成或通过网络下载的。 基本上,所有类加载器都是 java.lang.ClassLoader 类的实例。下面将详细介绍这个 Java 类。 java.lang.ClassLoader 类简介 java.lang.ClassLoader 类的基本职责是根据给定类的名称为其查找或生成相应的字节码,然后根据这些字节码定义一个 Java 类,即 java.lang.Class 类的实例。除此之外,ClassLoader 还负责加载 Java 应用程序所需的资源,如图像文件和配置文件。不过,本文只讨论它加载类的功能。为了履行加载类的职责,ClassLoader 提供了许多方法,其中比较重要的方法如表 1 所示。下文将详细介绍这些方法。 表 1.与加载类相关的 ClassLoader 方法
-
Spring Boot 如何热加载 jar 以实现动态插件?
-
大数据平台底层技术 - JAVA - 如何动态加载不同版本的 HIVE JDBC 驱动程序 - 一文读懂 JAVA 类加载机制 2
-
android加载动态webp图片
-
在HTML里的JavaScript里,如何实现动态加载script标签的脚本内容