Vue gets public images

1. Vue static resource folder

Vue has two folders for storing static resources: assets and public.
1. Assets folder
uses the require() method to load static resources, such as:

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

1. The files here have been processed by webpack. The parameters of the require method do not support variables and can only store the path of the file. Therefore, they cannot be obtained dynamically when loading images.

2. Public folder (previously called static in vue1.0 version)
The files in the public folder are not processed by webpack. When packaging, the files under public are directly copied to the directory of the packaged dist. Generally, files need to be obtained dynamically, or used when there are many files.
For public files, use process.env.BASE_URL + the directory path of the file under public directly, such as:

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

<img :src="`${publicPath}success.png`">

3. Introduction to assets and public files on the official website
https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4 %B9

This is the reprinted article:

Reprinted article: https://blog.csdn.net/u013116210/article/details/118639146