Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to solve the problem that pictures on vue pages do not display", the content is simple and clear, and I hope it can help you solve your doubts. Let me lead you to study and learn "how to solve the problem that pictures on vue pages do not display".

In the new version of the configuration interface, using the vue framework to achieve, in the configuration of the page picture found that there is a picture clearly page input path is correct, but the picture is not displayed

Phenomenon:

The resource of the network page does not report an error, and the status code is still 200. there is nothing in the preview. As soon as you enter it, you will find that any word you enter will appear.

Solution:

Configure the path of static resources in webpack

1. Find vue.config.js

2. Add a key to the devServer under module.exports

ContentBase:path.join (_ dirname,'src')

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

About contentBase, reference article

Https://www.jianshu.com/p/e547fb9747e0

Static resources:

Method 1: enter the path directly

Method 2: use 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'

Html:

The above is all the contents of this article entitled "how to solve the problem that pictures are not displayed on vue pages". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.