Solution to the problem that the Vue page image does not display

When making a new version of the configuration interface, I used the vue framework to implement it. When configuring the page image, I found that there was a picture whose path was correct but the picture was not displayed.

Phenomenon:

The network page resources do not report an error, and the status code is still 200. There is nothing in the preview. After entering, I found that 200 appears for any word I enter.

Solution:

Configure the path of static resources in webpack

1. Find vue.config.js

2. Add a key in devServer under module.exports

contentBase:path.join(_dirname,'src')

This means that webpack-dev-server will use the current path as the requested resource path

About contentBase, reference article

https://www.jb51.net/article/222324.htm

Static resources:

Method 1: Directly enter the path

<img class="sys_logo" src="./assets/images/top-logo.png"/>

Method 2: Using require

import logoUrl from './top-logo.png'
const Images = {
    logoUrl
}
export default Images

Method 3: Modularization

import logoUrl from './top-logo.png'
const Images = {
    logoUrl
}
export default Images

use:

js:

import Images from './assets/images'

<img class="sys_logo" :src="Images.logoUrl" />

This is the end of this article about the solution to the problem of images not displaying on vue pages. For more information about the problem of images not displaying on vue pages, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!