---

1. 前言

在uni-app 项目开发的过程中，经常需要引入各类外部文件，比如我们程序开发用到的图片、文件等，这些外部文件会被我们放在根目录下面的 static文件夹中，或者 src目录下的 static 文件夹中。

将这些外部文件应用到我们的项目中，就需要使用路径引入，看起来简单，但实际操作有很多需要注意的地方。本小节我们来学习在各种场景下面如何引用这些外部文件以及需要注意的一些问题。

2. 模板内引入静态资源

在<template>标签内引入静态资源，可以用相对路径和绝对路径引入。比如用 <image>标签的 src 属性引入图片，或者使用<video>标签的 src 属性引入视频。我们来分别演示一下。

2.1 绝对路径
实例：

<template>
  <view>
    <!-- /static是指根目录下的static目录 -->
    <image src="/static/imooc.png"></image>
    <!-- 在cli项目中，/static指的是src目录下的static目录，路径前面需要再加一个@ -->
    <image src="@/static/imooc.png"></image>
  </view>
</template>

2.2 相对路径
使用相对路径可能会出现路径查找失败的情况，并且在支付宝小程序组件内 <image> 标签不可以使用相对路径。所以我们日常开发过程中，尽量使用绝对路径，避免不必要的错误。
实例：

<image src="../../static/imooc.png"></image>

需要注意以下几点：

@开头的绝对路径以及相对路径会经过base64转换规则校验
 引入的静态资源在非h5平台，均不转为base64。
 H5平台，小于4kb的资源会被转换成base64，其余不转。
 自HBuilderX 2.6.6-alpha起template内支持@开头路径引入静态资源，旧版本不支持此方式。

3. js 文件引入

日常开发过程中，我们经常会在js文件中或者在 .vue 文件中的