The image path is wrong after vue-cli3 packaging

With the continuous development of front-end technology, various frameworks and tools are also emerging. In this era of great waves, Vue.js is undoubtedly an existence that cannot be ignored. However, as Vue.js becomes more and more popular, we will encounter some problems. This article will introduce the problem of incorrect image paths when using vue-cli3 to package projects, and provide some solutions.

Problem description

When using vue-cli3 for project development, we can usually use the img tag to introduce images. For example:

<img src="/static/imghwm/default1.png"  data-src="./assets/img/logo.png"  class="lazy" alt="logo" />

It is assumed that the logo.png image is located in the assets directory of the project. The image displays correctly when running the npm run serve command. However, when we run the npm run build command for packaging, we visit the packaged page and find that the image cannot be displayed normally. Through the browser's developer tools, we can find that the image loading fails, and The console gave the following error message:

http://your-domain.com/img/logo.4aebf758.png 404 (Not Found)

Herehttp://your-domain.com refers to the root directory path of the packaged project.

The reason for this problem

We know that Vue.js is based on the component development model. Generally, each component is a separate file, including HTML templates and CSS styles. , JavaScript code, etc. During the development process of Vue.js, we usually use the webpack packaging tool to build and package. Due to the webpack file packaging mechanism, it will package all the resources required by each component into the corresponding JavaScript file, and the browser can only obtain static resources through HTTP requests, so webpack will package the resource files (including images) ) path is converted into an HTTP request path.

In other words, when we use relative paths to reference resource files, the image will be searched in the http://localhost:8080 root directory when the project is running, and when packaging At this time, the path of the image has been packaged as a new path by webpack and placed in the img directory under the root directory. Therefore, when we use webpack packaged files, we need to modify the path.

Solution

Modify the root path of static resources

We can modify the publicPath field in vue.config.js value to replace the root path, thus solving the problem of wrong path.

First, create a new vue.config.js file in the project root directory and enter the following code:

module.exports = {
  publicPath: './'
}

The publicPath here is actually It is to set the packaged static resource storage path. The above code indicates that the static resources and index.html are stored in the same directory.

Use absolute paths to reference images

In addition to solving the problem by modifying publicPath, we can also directly use absolute paths to reference images, thus avoiding the need for relative paths. Come the question. For example:

<img src="/static/imghwm/default1.png"  data-src="/img/logo.4aebf758.png"  class="lazy" alt="logo" />

The / here represents the project root path. Images referenced in this way will not be affected by relative paths.

Place image files in the public directory

We can also place image files in the /public directory. Files in this directory will not be packaged by webpack. Instead, copy it directly to the packaged directory. In this way we can directly reference these images using relative paths.

Summary

Whether it is by modifying the path or using an absolute path to reference the image, the solution is relatively simple. In actual development, in order to reduce the problem of path errors, we can develop good habits during development and try to use absolute paths or place images in public directories. This not only facilitates debugging and maintenance, but also reduces path errors after packaging. Hope this article is helpful to you.

The above is the detailed content of The image path is wrong after vue-cli3 packaging. For more information, please follow other related articles on the PHP Chinese website!