大家好,我是前端队长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即可。

原文链接:https://www.cnblogs.com/weizaiyes/p/7461967.html

关于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

(完)

如果有问题可以帮我指出,感谢!

--- End ---

你好,我是前端队长Daotin,专注分享前端与认知。希望在这里,和你分享我的前端学习和工作经验,记录个人成长。

想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势。

vue如何动态加载本地图片的更多相关文章

  1. vue中动态加载img

    想实现动态加载图片,当点击“首页”时,图片变色 代码如下: <mt-tabbar v-model="selected" fixed class="border-1p ...

  2. Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子

    Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子 procedure TForm1.Button1Click(Sender: TObject); ...

  3. android ImageLoader加载本地图片的工具类

    import android.widget.ImageView; import com.nostra13.universalimageloader.core.ImageLoader; /** * 异步 ...

  4. UIWebView如何加载本地图片

    UIWebView如何加载本地图片 UIWebView加载本地图片是有实用价值的.比方说,有时候我们需要本地加载静态页来显示相关帮助信息,而这些帮助信息当中含有很多很多的富文本,用代码实现难度较大,这 ...

  5. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  6. Flutter学习笔记(19)--加载本地图片

    如需转载,请注明出处:Flutter学习笔记(19)--加载本地图片 上一篇博客正好用到了本地的图片,记录一下用法: 首先新建一个文件夹,这个文件夹要跟目录下 然后在pubspec.yaml里面声明出 ...

  7. !!!myeclipse 上加载本地图片问题,无法加载问题

    出现无法加载本地图片的问题, 原因就是把图片放到了本地项目中的image了,但是myeclipse上没有刷新 这样以后 本地的图片比在线的要快 低级错误,诶!

  8. 关于Unity3D中Resources动态加载NGUI图片的方法

    在NGUI中有些图片我需要动态进行变更或者加载,怎么办? 首先在项目中创建一个Resources目录,接着把需要的图片放在这里面,可以有子文件夹么?当然可以,文件结构很重要哦~ NGUI加载图片的方法 ...

  9. QTreeWidget实现动态加载本地文件系统

    QT之前没有接触过,之所以做这个也是被临时拉去GoldenFarm组去做渲染的客户端:还别说,虽说是第一次,做出来的这个东西倒是挺让我满意的.先说一下具体需求,然后再上图吧: 渲染时在选择场景文件时, ...

随机推荐

  1. deeplearning量化

    deeplearning量化 量化配置 通过字典配置量化参数 TENSORRT_OP_TYPES = [ 'mul', 'conv2d', 'pool2d', 'depthwise_conv2d', ...

  2. 如何在框架外部自定义C++ OP

    如何在框架外部自定义C++ OP 通常,如果PaddlePaddle的Operator(OP)库中没有所需要的操作,建议先尝试使用已有的OP组合,如果无法组合出您需要的操作,可以尝试使用paddle. ...

  3. CVPR 2020目标跟踪多篇开源论文(上)

    CVPR 2020目标跟踪多篇开源论文(上) 1. SiamBAN:面向目标跟踪的Siamese Box自适应网络 作者团队:华侨大学&中科院&哈工大&鹏城实验室&厦门 ...

  4. 基于TensorRT 3的自动驾驶快速INT8推理

    基于TensorRT 3的自动驾驶快速INT8推理 Fast INT8 Inference for Autonomous Vehicles with TensorRT 3 自主驾驶需要安全性,需要一种 ...

  5. 什么是阻塞、非阻塞、同步和异步以及IO模型

    首先先看如下几个问题,或者说我们经常会遇到的问题. 阻塞是否等于同步?非阻塞是否等于异步?同步一定是阻塞的么?异步一定是非阻塞的么?要把这四个概念讲明白,先从一顿简餐说起.假设你要做一顿便饭:烧土豆: ...

  6. MySQL必知必会笔记-Mysql基本操作

    Mysql基本操作 mysql的基本操作包括增.删.改.查,本书中前三章简单的介绍MySQL为何物,查是mysql中非常重要的功能,4-6章展示了mysql的查(查询--select)的简单实现,my ...

  7. CENTOS7 安装 SYNCTHING

    本地电脑需要同步远程数据,安装syncthing 测试 1:下载 wget https://github.com/syncthing/syncthing/releases/download/v1.5. ...

  8. 【VBA】MsgBox用法

    MsgBox用法: Sub subMsgBox() Dim iok As Byte iok = MsgBox("是否XXX", vbYesNoCancel + vbQuestion ...

  9. csp-s模拟测试「9.14」A·B·C(三分,贪心)

    博客大概咕了很久了......... T1 A 大概推下式子就好了,考试时数据点分治DFS前30点T了,然后后70分因为两数相乘爆long long然后本来可以A掉,就WA零了....... 式子推出 ...

  10. Windows10 准备/安装Flutter研发环境

    Flutter简介 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面和嵌入式平台. Flutter 中国 安装Flutte ...