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-%E6%96%87%E4%BB%B6%E5%A4%B9

这是转载的文章:

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

你可能感兴趣的:(vue.js,前端,javascript)