Vue如何替换本地图片

这篇文章主要介绍“Vue如何替换本地图片”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue如何替换本地图片”文章能帮助大家解决问题。 Vue替换本地图片的方法：1、通过“”将图片转为base64格式；2、使用import引入图片；3、使用require动态加载；4、引入“publicPath”并且将其拼接在路径中，实现引入路径的动态变动即可。vue动态加载本地图片今天遇到一个在vue文件中引入本地图片的问题，于是有了这篇文章。通常，我们的一个img标签在html中是这么写的：这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话，这类资源将会直接被拷贝，而不会经过 webpack 的处理。如果src是变量的话，我们一般会在data中定一个变量src进行动态绑定。然而这时候，会发现这个时候图片并没有被加载出来，图片没有显示出来，通过查看发现这张图片的地址显示 ../images/demo.png ，也就是说通过v-bind形式绑定的相对路径不会被webpack的file-loader处理，只会做简单的文本替换。那怎么办呢？1、将图片转**base64**格式一般免费云主机、域名图片比较小的可以这么做，比如图标icon等，大小一般在10KB以内的。2、使用**import**引入图片3、使用**require**动态加载4、引入**publicPath**并且将其拼接在路径中，实现引入路径的动态变动在vue.config.js中配置publicPath路径：静态资源可以通过两种方式进行处理：在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

从相对路径导入当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。用绝对路径引入时，路径读取的是public文件夹中的资源，任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中，而不经过 webpack特殊处理。当你的应用被部署在一个域名的根路径上时，比如http://www.abc.com/，此时这种引入方式可以正常显示但是如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀，publicPath 是部署应用包时的基本 URL，需要在 vue.config.js 中进行配置。按照上面理论，如果我采用相对路径的方式引入图片的话，webpack会对其require处理。实际上确实如此，我看到页面的背景变成：这是根据url-loader的配置处理的结果。或者采用动态style的方式：关于“Vue如何替换本地图片”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云技术行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: vue能不能显示源码

这篇文章主要介绍“vue能不能显示源码”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue能不能显示源码”文章能帮助大家解决问题。 vue能显示源码，vue查看看源码的方法是：1、通过“git clone https:…