vue项目 图片引用

vue版本：vue 2.x

脚手架：webpack

1、静态引用图片

像logo、等一些不变的图片，通常直接是直接写s的

1.1、图片在assets下

创建webpack项目时会生成 /src/assets

如果图片在该文件下，可以通过此方式引用（直接引用路径）：

<img src="@/assets/图片路径" >

<!--<img src="../assets/图片路径" >
这里的 @ 指的是该项目
-->

1.2、图片在static下

也会自动生成一个static 文件夹（跟src平级）

此时图片在该文件下，可以通过此方式引用（直接引用）：

<img src="../../static/图片路径" >

注：此时就不能使用 @ ,可以直接点点到图片路径中；

2、动态引用图片

2.1、图片在assets下

同上，会自动创建该文件

这时直接使用获取到的图片路径是行不通的，需要对其图片进行 require 载入操作：

// html
<img :src="setImg(图片路径)" />

绑定一个方法，对图片路径进行载入操作

// js 图片处理方法
methods: {
    setImg (imgUrl) {
      return require('@/' + imgUrl)
    }
  }

2.2、图片在static下

同上，也会生成一个static文件

这个时候是可以直接使用从数据库获取的图片路径；

是不能使用require 进行载入，报错(找不到资源模块)；

2.3、使用图片链接

直接使用图片链接地址；

// 图片地址
data () {
    return {
      imgLink: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6fae8cbea12505f89b350c48d407441a.jpg?thumb=1&w=1226&h=460&f=webp&q=90'
    }
  },

<img :src="imgLink"/>