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

Editor to share with you what to do if the picture can not be loaded after the Vue project build, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's go to know it together.

Vue project build image cannot be loaded

For the vue project, the image will be processed after build. The specific processing method is in the file webpack.base.conf.js, with the following code:

Module: {rules: [{test: /\. (png | jpe?g | gif | svg) (\?. *)? $/, loader: 'url-loader', options: {limit: 10000, / / 1k-limit the size of the file name: utils.assetsPath (' img/ [name]. [hash: 7] .[ ext]')}]}

In the above code, url-loader is used to limit the size of the image. Within limit, webpack will convert the image to base64, which exceeds the limit limit and will be handed over to file-loader for processing.

If it is within the range of limit, there will be no situation in which the picture cannot be loaded.

Exceeding the limit,webpack will put the processed image in the dist/static/img/, and the loaded image will not be displayed at this time. The specific practices are as follows:

1. In the config/index.js file

Modify the code: (list part of the code for index.js)

Build: {/ / Template for index.html index: path.resolve (_ _ dirname,'. / dist/index.html'), / / Paths assetsRoot: path.resolve (_ _ dirname,'. / dist'), assetsSubDirectory: 'static', assetsPublicPath:'. /',}

The value of assetsPublicPath field has been changed from'/'to'. /'

two。 In the webpack.prod.conf.js file

Output field, add the code (publicPath:'. /'):

Output: {publicPath:'. /', / / added code path: config.build.assetsRoot, filename: utils.assetsPath ('js/ [name]. [chunkhash] .js'), chunkFilename: utils.assetsPath ('js/ [id]. [chunkhash] .js')}, 3. Add publicPath:'../../' to the utils.js file

The code is as follows:

/ / (which is the case during production build) if (options.extract) {return ExtractTextPlugin.extract ({use: loaders, fallback: 'vue-style-loader', publicPath:'.. /'/ / added code})} else {return ['vue-style-loader'] .concat (loaders)}

After the above steps are completed, execute the command: npm run build

After build, the introduction path of the link and script tags of the index.html page in dist becomes a relative path; at the same time, the related image path also changes to a relative path, and the image path 404 no longer appears when the project is deployed.

Some pictures will not be displayed after the Vue project is packaged.

1. The suffix name of the picture cannot contain ad letter-sensitive words (that is, Google will consider it an advertisement and will automatically delete it).

two。 The reason for the picture itself (quality) has nothing to do with the front end, you need to let UI give the new design picture. -- Note: QQ screenshots directly to the local images may not be displayed after packaging, so you need to ask UI for the original design drawings.

The above is all the contents of the article "what to do if the picture can not be loaded after the Vue project build". 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.