Vue image path problem

Vue image path problem (dynamic/static import: absolute path, relative path)

DEMO example (can solve problems quickly):

Note: The pictures imported by absolute path need to be stored in the public folder

Statically import relative paths:

<img src="../../assets/1.png" />
<!-- 或者如下 -->
<img src="@/assets/1.png" />

Dynamically import relative paths:

Method 1 (  require written in html):

<img :src="require('../../assets/' + imageUrl)" />

<script>
export default {
	data() {
        return {
            // 图片路径变量，真实路径为 assets/images/1.png
            imageUrl: 'images/1.png'
        }
    }
}
</script>

Method 2 (  require written in js):

<img :src="imageUrl" />

<script>
export default {
	data() {
        return {
            // 图片路径变量，真实路径为 assets/images/1.png
            img: 'images/1.png',
            imageUrl: require('../../assets/' + this.img)
        }
    }
}
</script>

Dynamically import absolute paths:

<img :src="imageUrl" />

<script>
export default {
	data() {
        return {
            // 图片路径变量，真实路径为 public/images/1.png
            imageUrl:'images/1.png'
            // 或者 imageUrl:'/images/1.png'
        }
    }
}
</script>

Need to understand these points
What is a relative path and an absolute path?
Why is the relative path plus @ different?
How is the public folder different?
Why do images imported by absolute paths need to be in the public folder?
Why use require when dynamically loading?
Why can't require directly use variables to receive addresses?
1. What are relative paths and absolute paths?
Simply put:

Relative path: start with ., such as ./, ../ and the like. It is relative to the location of your own target file.

Absolute path: starting with /. It is the real path of the target file. Indicates the root directory of the current site.

2. Why is the relative path plus @ different?
Just read these two pictures carefully.


Vue CLI official introduction

3. How is the public folder different?
Let's take a look at the folder generated after packaging through npm run build. To put it simply, you will deploy these files to the server in the future. Except for the data directory (marked in red box) under the original public folder, other folders are obtained after packaging with webpack. It is no longer the original directory structure, and the name is different.

4. Why do the pictures imported by the absolute path need to be in the public folder?
Excerpted from Vue CLI official website:

To put it simply,  public the files in the directory will not be compiled, and can be obtained through the absolute path after deployment. If it is still placed in the original  assets directory, it will be packaged into a new folder by webpack, so it cannot be passed.

5. Why use dynamic loading require?

<img :src="'./assets/images/02.jpg'" alt=""> // 错误的引入方式
<!-- 编译后 -->
<img src="./assets/images/02.jpg" alt="">

<!-- 注意（绝对路径） -->
<img :src="'images/02.jpg'" alt="">	// 正确的引入方式
<!-- 编译后 -->
<img src="images/02.jpg" alt="">

Using: src calls the v-bind command to process its content, and the relative path will not be processed by webpack's file-loader. After compiling, the structure of the assets directory has changed, but the directory of the code has not changed, so the relative path method does not work, and the absolute path is no problem.

6. requireWhy can't I directly use variables to receive addresses? ` 

<!-- 错误用法 -->
<img :src="require(imageUrl)" />   // 变量 imageUrl: '../../assets/images/1.png'

Solution: use string template or variable name + empty string.

let url = './data/test.json';
const json1 = require(url);			//错误用法
const json2 = require(`${url}`);	//正确用法
const json3 = require(url + '');	//正确用法

With a related explanation link:

https://www.zhihu.com/question/421711093

This should be the implementation problem of webpack. If you are interested, you can learn more about it. If you use it, it is enough to read this article!