What should I do if vue reports an error that it cannot find the picture?

The solution to the Vue error that the image cannot be found: 1. Modify the configuration file and change the absolute path to a relative path; 2. Load the image as a module and put the image in the static directory; 3. Introduce imageUrls into the corresponding vue file and parse the reference.

The operating environment of this tutorial: windows7 system, vue3, Dell G3 computer.

What should I do if vue reports an error that it cannot find the image?

The problem and solution of images not loading in vue

When using vue to develop projects, a problem often encountered is: image loading Not coming out. Below are the situations and solutions I have summarized for several situations where images cannot be loaded.

1. After the project packaging is completed, open the overall blank

1. Path problem

Cause

In the vue webpack project, after the project is packaged The reference paths of css and js are absolute paths. After the project is deployed, static will be regarded as the root directory, causing an error in the file reference path.

Solution

Change the absolute path to a relative path by modifying the configuration file.

The specific operations are as follows:

1.vue-cli before version 3.0

Configure the path exported by the bulid module in index.js under config. Because the content in index.html is introduced through script tags, and your path is wrong, it will definitely be blank when opened. Let’s take a look at the default path first.

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

The default assetsPublicPath is ‘/’ which is the root directory. Our index.html and static are in the same directory. So change it to './ '

2.vue-cli After version 3.0

Configure the vue.config.js file

module.exports = {
  // baseUrl:'./', // vue-cli3.3以下版本使用
  publicPath:'./' // vue-cli3.3+新版本使用

2. The history mode of vue-router has a blank interface after packaging.

The default mode in router/index.js routing configuration in src is hash. If you change it to history mode, it will also be opened. Blank. So change it to hash or delete the mode configuration directly and make it the default.

If you must use the history mode, you need to add a candidate resource on the server that covers all situations: if the URL cannot match any static resources, you should return an index.html, and this page is yours app depends on the page.

// mode: 'history' 
// 默认hash

2. The image in the assets directory cannot be loaded

The difference between the assets and static files of vue-cli

• assets: During the project compilation process, it will be processed and parsed into module dependencies by webpack. Only relative path forms are supported, such as a6f88eaad3fd08d2d0724bf21b45e7c8 and background:url( ./logo.png), './logo.png' is a relative resource path, which will be parsed by webpack as a module dependency.
• static: Files in this directory will not be processed by webpack. Simply speaking, the place where third-party files are stored will not be parsed by webpack. It will be copied directly to the final packaging directory (default is dist/static). These files must be referenced using absolute paths, which are determined through the build.assetsPublic and build.assertsSubDirectory links in the config.js file. Any file placed in static/ needs to be referenced as an absolute path: /static[filename].

According to the characteristics of webpack, in general, static files will not change, third file files, asserts files that may change

Reason

In webpack, images will be used as modules. Because they are dynamically loaded, url-loader will not be able to parse the image address. Then, after npm run dev or npm run build, the path will not be processed [parsed by webpack] The path will be parsed as /static/img/[filename].png, and the complete address is localhost:8080/static/img/[filename].png】

Solution

1. Load images as modules

For example, images:[{src:require('./1.png')},{src:require('./2.png') }] so that webpack can parse it.

2. Place the image in the static directory

But it must be written as an absolute path, such as images:[{src:”/static/1.png”},{ src:”/static/2.png”}] so that the image will be displayed. Of course, you can also shorten the writing length of the path by defining it in webpack.base.config.js.

How to simplify local image loading

1. Create a new imageUrls folder in static

2. Fill in the imageUrls file

{
  'imageUrls': [
    {
      'image1': '/static/image/image1.png'
    },
    {
      'image2': '/static/image/image2.png'
    }
  ]
}

3. Introduce imageUrls into the corresponding vue file and just parse the reference

import img from '../../../static/imageUrls/imageUrls.json'
export default {
  data() {
    return {
      imageGroups: img.imageUrls
    }
  }
}

Recommended learning: "vue.js Video Tutorial"

The above is the detailed content of What should I do if vue reports an error that it cannot find the picture?. For more information, please follow other related articles on the PHP Chinese website!