What are the methods for reference paths in Vue single files?

This article mainly introduces you to the relevant information about reference path processing in vue single files. The article introduces it in detail through sample code. It has certain reference learning value for everyone to learn or use vue.js. Friends who need it Let’s learn together with me.

Preface

Vue's single file component is very commonly used when using Vue, and in the development process of vue single file, in the single file The template may involve the processing of file paths, such as , the processing of background in style, etc. The following discusses the src processing of in several different scenarios, and explains how to correctly reference static resources (such as image 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 (image static resources are stored in src/assets/small.png):

<template>
 <p id="app">
 <!-- 1. 模版中src选项直接写相对路径 -->
 <img src="/static/imghwm/default1.png"  data-src="./assets/small.png"  class="lazy"   alt="图片相对路径测试">
 <!-- 2. 模版中src选项绑定相对路径字符串 -->
 <img src="/static/imghwm/default1.png"  data-src="relative_img"  class="lazy"  : alt="图片相对路径测试">
 <!-- 3. 模版中src选项绑定html绝对路径字符串 -->
 <img src="/static/imghwm/default1.png"  data-src="absolute_img"  class="lazy"  : alt="图片绝对路径测试">
 <!-- 4. 模版中src选项绑定手动加载的图片资源 -->
 <img src="/static/imghwm/default1.png"  data-src="smallImg"  class="lazy"  : alt="图片资源测试">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 };
 },
}
</script>

The above code snippets give four scenarios of how to use the img tag to reference image resources in the Vue single file component. Of course, not all of these four methods can load image resources correctly.

Case 1:

Bind directly to the src attribute with a relative path in the template. In this case, the image resource can be loaded correctly. We know that in the process of webpack processing vue single file components, vue-loader is mainly responsible for processing *.vue files. The vue-loader resource path processing section in the vue-loader documentation explains how vue-loader handles resource paths in templates. For example: , background: url(), @import, etc. will be processed as module dependencies. That is to say, in these cases, vue-loader automatically handles the resource reference of the path and the final path replacement. The processing of img is as follows:

<img  src="/static/imghwm/default1.png"  data-src="./logo.png"  class="lazy"   alt="What are the methods for reference paths in Vue single files?" >

will be compiled by the vue template compiler into:

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

This also explains why the image content can be displayed correctly in case 1, because vue-loader Automatically help us with resource introduction and path replacement.

Case 2:

The relative path string variable is bound to the src attribute in the template. In this case, the image cannot be displayed normally. . The reason is that vue-loader cannot identify whether the variable is a path string, so there is no problem of vue-loader automatically introducing resources and path replacement. In this case, the compiled template is still a relative path string. Obviously, without the corresponding resource introduction and wrong path, the image cannot be displayed correctly.

Situation 3:

Many people try to use absolute path variables to import while relative paths cannot be displayed correctly. Obviously, this In this case, the image cannot be displayed because the image resource has not been manually introduced. Note: Many students try to manually introduce resources and then bind src according to the absolute path variable. They find that there are indeed referenced resources under the dist/static/img/ path, but the url-loader in the vue-cli webpack template does not work for img type files. When loading, the processing of hash values ​​is added. In this case, even if we bind an absolute path variable, we still cannot correctly reference the image because it cannot correctly match the image file to which the hash value is added. In this case where images need to be introduced manually, the approach to situation 4 is recommended.

Case 4:

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

To sum up, in the vue single file component, the key to correctly displaying an image is:

• The image resource is required or imported, that is, it will be used by webpack's url -loader is processed to the final directory

• img src attribute needs to be replaced with the final image resource path

The above two points are indispensable. . The reason why the picture can be displayed correctly in case one and case four is that the above two conditions are met in both cases. In case one, vue-loader automatically does this for us, and in case four, we do it manually.

Problems that may be encountered during development:

During development, you may encounter a scenario where a picture list is rendered in a loop. According to the above summary , we can construct an array of image information objects, such as:

<template>
 <p id="app">
 <!-- 1. 模版中 src 选项直接写相对路径 -->
 <img src="/static/imghwm/default1.png"  data-src="./assets/small.png"  class="lazy"   alt="图片相对路径测试">
 <!-- 2. 模版中 src 选项绑定相对路径字符串 -->
 <img src="/static/imghwm/default1.png"  data-src="relative_img"  class="lazy"  : alt="图片相对路径测试">
 <!-- 3. 模版中 src 选项绑定绝对路径字符串 -->
 <img src="/static/imghwm/default1.png"  data-src="absolute_img"  class="lazy"  : alt="图片绝对路径测试">
 <!-- 4. 模版中 src 选项绑定手动加载的图片资源 -->
 <img src="/static/imghwm/default1.png"  data-src="smallImg"  class="lazy"  : alt="图片测试">
 <!-- 5. 循环加载图片资源示例 -->
 <img src="/static/imghwm/default1.png"  data-src="image.src"  class="lazy" 
 v-for="image in imgList"
 :key="image.id"
 :
 :alt="image.title">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
import bigImg from &#39;./assets/big.jpg&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 imgList: [
 { id: 1, title: &#39;test1&#39;, src: require(&#39;./assets/logo1.png&#39;) },
 { id: 2, title: &#39;test2&#39;, src: require(&#39;./assets/logo2.png&#39;) },
 { id: 3, title: &#39;test3&#39;, src: require(&#39;./assets/logo3.png&#39;) },
 ],
 };
 },
}
</script>

In this way, we can perfectly display the images we render in a loop.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using the input box to find keywords in jquery

How to change skin in Vue?

How to implement the specified assignment method using js and jQuery

The above is the detailed content of What are the methods for reference paths in Vue single files?. For more information, please follow other related articles on the PHP Chinese website!