How to solve the problem of invalid static resource images after vue packaging

Below I will share with you an article that solves the problem of invalid static resource images after vue packaging. It has a good reference value and I hope it will be helpful to everyone.

1. Problem description

#In project development, when we package the file through npm run build and put the file on the server, it usually There is an image failure problem, and the console prompts that a certain image is not found (404 error). These images can be images introduced with src, or they can be background images defined in css. Whether the image can be displayed is directly related to the location of your static resource file and the imported path. The following is the file storage and path writing method of one of my projects!

2. One of the solutions

The static storage location of static resources is placed in the src directory

You may ask why it is placed in the src directory? Can't it be placed in the same directory as src? Well, at first I put it in the same directory as src, but when I introduced the background image in a certain css file, the image became invalid after packaging. This is how I introduced it

Practice has proven that this way of writing is wrong. This will cause a lot of errors (such as css-loader errors) when you package it, and the project will not even run.

So I used the following writing method:

This writing method is also not allowed, the reason is Your static resource file static is not in the src directory, and in Vue the src directory is relative to the root directory which is the src directory, so if you want to use the above writing method, you must put static in the src directory. As shown in Figure 1 and Figure 2 above

Note: static/images/user.png cannot be written as /static/images/user.png, otherwise the image will still be invalid.

The above is about the file storage location and the introduction of images into css. If the image is introduced through the img tag, it is relatively simple. Just write the absolute address directly, and the static resource static folder The location can be in src, or it can be placed at the same level as src, but in order to avoid the above situation, just put it in src!

imgIntroducing pictures:

The above is a way to solve the problem of image failure. Of course, if you have to put static The resource directory is placed in the same directory as src. There are also solutions, such as importing images (I have not practiced this), you can try it yourself!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implementing local static image path in using vue (detailed tutorial)

According to the webpack configuration, the font icon is caused Solution to failure to display (detailed tutorial)

Using the BootStrap user experience framework in React (detailed tutorial)

The above is the detailed content of How to solve the problem of invalid static resource images after vue packaging. For more information, please follow other related articles on the PHP Chinese website!