How to introduce images in vue-cli scaffolding (code)

The content of this article is about how to introduce images (code) into vue-cli scaffolding. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Import method

Step one: import edit from 'path' in the .vue file (path is the relative path between the image and .vue)

Step 2: Define an attribute edits in the data object, and the value corresponds to edit

Step 3: Bind attributes to the tag in the template

Finally refresh the interface to see the effect!

2. Static method

The first step: put the image in the static folder, define the attribute pro_img in one of the data objects, and the attribute value is the relative path between the image and .vue

Second step: Bind attributes to the tag in the template

Refresh to see the effect

Solution to vue component css Background image path error problem

The premise is that you use vue-cil, then find ExtractTextPlugin.extract({}) in utils.js in the build directory, and add the following attribute to it to perfectly solve the problem publicPath: '.. /../'

Explanation

The file will eventually be packaged and compressed into js. When running, the relative path in the css has changed to point to the root directory, so a loading error occurs.

The following is an explanation of this plug-in.

extract-text-webpack-plugin

Function: The main purpose of this plug-in is to extract css styles and prevent the page style loading disorder caused by packaging styles in js.

Plug-in parameters: The plug-in has three parameters with the following meanings:

use: refers to what kind of loader is needed to compile the file. Since the source file is .css, css-loader## is selected here. #fallback: What loader is used to extract the css file after compilation
publicfile: used to overwrite the project path and generate the file path of the css file

Related recommendations:

vue- How to use cli scaffolding initialization

Image and text analysis How to use vue-cli scaffolding

The above is the detailed content of How to introduce images in vue-cli scaffolding (code). For more information, please follow other related articles on the PHP Chinese website!