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

This article shares with you the content of the sample analysis introduced by images in vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The introduction of pictures is nothing more than a path problem, and there will be absolute paths and relative paths.

One way to introduce is to introduce the absolute path directly.

There is another way of introduction, the relative path.

Of course, several ways to introduce static resources

Is imported in JavaScript or through a relative path in template/CSS (with. At the beginning) is quoted. Such references are handled by webpack.

Such as

, background: url (…) And CSS @ import resources

Write background of inline style in template: url (…) Style, in the current version of the test, even if a relative path is used, it will not be handled by webpack

For example, url (. / image.png) will be translated into require ('. / image.png')

Speaking of which, by the way, let's talk about the difference between assets directory and public directory.

This is the assets directory, and webpack will process the files in it.

While the public directory, webpack will not deal with the files inside. When packaging, it will directly package to generate a public directory, and the files in the directory will not be processed by webpack.

Placed in the public directory or referenced by an absolute path. Such resources will be copied directly without being processed by webpack, and you need to refer to them through absolute paths.

If URL is an absolute path, such as / images/foo.png, it will be left unchanged.

Introduce exampl

Correct example

/ / √ / / after compilation:

The common introduction method is that the path is a fixed string, the picture will be processed by webpack, and if the file is lost, it will make a direct error in the compilation Times, and the resulting file contains a hash value.

Error instance

/ / × / / after compilation:

Error introduction, using: src calls the v-bind instruction to process its contents, and the relative path will not be handled by the file-loader of webpack

The correct way of introduction

/ / √

/ / √

/ / √ export default: {data () {return {imgName:'03.jpg', img3:require ('. / assets/images/03.jpg'),}},} / / after compilation:

When the file name of the path needs to concatenate variables, it can be introduced using require (). Require introduction or stitching can be performed in either template: src or script datacomputed.

/ /-/ after compilation:

When introduced with an absolute path, the path reads the resources in the public folder, and any static resources placed in the public folder will be simply copied to the compiled directory without special webpack processing.

When your application is deployed on the root path of a domain name, such as http://www.abc.com/, this introduction will display normally.

But if your application is not deployed at the root of the domain name, then you need to configure the publicPath prefix for your URL

PublicPath is the basic URL when deploying the application package, which is configured in vue.config.js

The right way.

/ / √ / / after compilation:

Export default: {data () {return {publicPath: process.env.BASE_URL,}},} vue.config.js: / / vue.config.jsmodule.exports = {publicPath:'/foo/',...}

PublicPath is introduced and spliced into the path to realize the dynamic change of the introduced path.

Thank you for reading! This is the end of this article on "sample analysis of pictures introduced in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.