Vue 获取 public图片

一、Vue静态资源文件夹

Vue 有两个存放静态资源的文件夹：assets和public。

1、 assets文件夹

使用require()方法加载静态资源，如：

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

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`">

3、官网assets和public文件介绍

https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-文件夹

这是转载的文章：

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