Vue 获取 public图片

一、Vue静态资源文件夹

Vue 有两个存放静态资源的文件夹：assets和public。
1、 assets文件夹
使用require()方法加载静态资源，如：

require('./assets/image/success.png')
1

1、这里的文件经过webpack处理过的，require方法的参数不支持变量，只能存文件的路径，因此加载图片时不能动态获取。

2、public文件夹（以前vue1.0版本叫static）
public文件夹的文件是不经过webpack处理，打包时直接把public下的文件复制到打包后的dist的目录下的。一般需要动态获取文件，或者文件很多时使用。
public的文件直接使用process.env.BASE_URL + public下文件的目录路径，如：

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

<img :src="`${publicPath}success.png`">
1
2
3
4
5
6
7

3、官网assets和public文件介绍
https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9

这是转载的文章：

转载的文章：https://blog.csdn.net/u013116210/article/details/118639146