Several methods of introducing pictures in Vue-CLI scaffolding

My personal common method has been exploiting a better way. If you have any suggestions, you can give me a message

1, Import method

Step 1: Import Edit from ‘Path’ in .Vue File (Path is the relative path of picture and .Vue)

Step 2: Define an attribute edits in the DATA object, the value corresponds to Edit

vue-cli脚手架引入图片的几种方法总结 Step 3:

Binding the label binding attribute

The final refresh interface is ok!

vue-cli脚手架引入图片的几种方法总结 2, Static Method

The first step: Picture is placed in the Static folder, defines attribute pro_img, attributes in one of the DATA object The value is the relative path of the picture and .Vue

Step 2: Binding the label binding attribute


Solve the VUE component CSS background image path error problem vue-cli脚手架引入图片的几种方法总结

Prerequisite is to use Vue-Cil, then in Build Locate extractTextPlugin.extract ({}) in utils.js, add this property in the following properties to solve the publicPath: ‘../..’


The file will eventually package compression to JS. When running, the relative path in the CSS points to the root directory that has changed, so there is a problem with the load error. vue-cli脚手架引入图片的几种方法总结

The following is the explanation of this plugin.


The plugin is mainly in order to extract the CSS style to prevent the style packaging in JS.

Plug-in parameters: The plugin has three parameters as follows:

Use: What kind of Loader is needed to compile files, here because the source file is .css Choose CSS-Loader


What Loader is compiled to extract CSS files

publicfile: is used to overwrite item paths, generating this CSS File path

The above Vue-CLI scaffold introduced several ways to introduce pictures, the summary of Xiaobian sharing to everyone, I hope I can give you a reference, I hope everyone supports Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment