The following describes how to handle the path referenced in a single vue file: vue

The following describes how to handle the path referenced in a single vue file: vue

Preface

Vue single-file components are very commonly used when using Vue. During the development of vue single-file components, file path processing may be involved in single-file templates, such as , processing of background in style. The following section discusses the src processing of in several different scenarios and explains how to correctly reference static resources (Slice Processing) during the development process using vue + webpack ).

As shown below, the following single file component provides examples of referencing image paths in different scenarios (static image resources are stored in src/assets/small.png ):

<Template> <div id = "app"> <! -- 1. directly write the relative path for the src option in the template -->  <! -- 2. Bind the relative path string to the src option in the template -->  <! -- 3. The src option in the template is bound to the html absolute path string -->  <! -- 4. the src option in the template is bound to the manually loaded image resources -->  </div> </template> <script> import smallImg from '. /assets/small.png '; export default {name: 'app', data () {return {smallImg: smallImg, relative_img :'. /assets/small.png ', absolute_img:'/static/img/small.png ', };}}</script>

The preceding code snippets show how to use the img tag to reference image resources in a vue single file component in four scenarios. Of course, none of the four methods can load image resources correctly.

Scenario 1:

Directly bind the template to the src attribute using the relative path. In this case, the image resources can be correctly loaded. We know that in the process of webpack processing a single vue file component, vue-loader is used to process the *. vue file. In the vue-loader document, the vue-loader resource path processing section describes how vue-loader processes the resource path in the template. For example, , background: url (), @ import, and so on will all be processed as module dependencies. In other words, in these cases, vue-loader automatically handles resource references of paths and replaces the final paths. Img processing is as follows:

Will be compiled by the vue template compiler:

createElement('img', { attrs: { src: require('./logo.png') }})

This explains why vue-loader automatically introduces resources and replaces paths.

Scenario 2:

A relative path string variable is bound to the src attribute in the template, which cannot be displayed normally. The reason is that vue-loader cannot identify whether the variable is a path string. Therefore, vue-loader automatically introduces resources and replaces paths. In this case, the compiled template is still a relative path string. Obviously, Images cannot be correctly displayed without corresponding resource introduction and wrong paths.

Case 3:

While the relative path cannot be correctly displayed, many people try to introduce the absolute path variable. Obviously, Images cannot be displayed in this case because image resources are not manually introduced. Note: many users try to manually introduce resources and bind src according to the absolute path variable, and find that the referenced resources exist in the dist/static/img/path, however, the url-loader in the vue-cli webpack template adds the hash value for img files during loading. In this case, even if we bind an absolute path variable, we still cannot correctly reference the image because it cannot match the image file with the added hash value. In this case, we recommend that you use case 4 to manually introduce images.

Case 4:

In the template, the src attribute is directly bound to the image resources manually introduced. In this case, the image can be correctly displayed. This method is also used by vue-loader when processing resources corresponding to the automatically introduced path.

In summary, the key to correctly displaying an image in the vue single file component is:

• The image resource is require or import, and will be processed by webpack url-loader to the final directory.
• The img src attribute must be replaced with the final image resource path.

The above two points are indispensable. Scenario 1 and scenario 4 the reason why the image is correctly displayed is that the above two conditions are met in both cases. In Case 1, vue-loader automatically helps us do this, and in case 4 we did this manually.

Problems that may occur during development:

During development, an image list may be rendered cyclically. Based on the above summary, we can construct an array of image information objects, for example:

<Template> <div id = "app"> <! -- 1. directly write the relative path for the src option in the template -->  <! -- 2. Bind the relative path string to the src option in the template -->  <! -- 3. The src option in the template is bound to the absolute path string -->  <! -- 4. The src option in the template is bound to the manually loaded image resource -->  <! -- 5. example of looping image resources -->  </div> </template> <script> import smallImg from '. /assets/small.png '; import bigImg from '. /assets/big.jpg '; export default {name: 'app', data () {return {smallImg: smallImg, relative_img :'. /assets/small.png ', absolute_img:'/static/img/small.png ', imgList: [{id: 1, title: 'test1', src: require ('. /assets/logo1.png ')}, {id: 2, title: 'test2', src: require ('. /assets/logo2.png ')}, {id: 3, title: 'test3', src: require ('. /assets/logo3.png ')},] ,};}}</script>

In this way, we can perfectly display the images that we have rendered cyclically.

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.