Preface
What is Vue? It is a progressive framework for building user interfaces (explained by the official website). What is a progressive framework? The simple answer is to advocate the least. These concepts can only be viewed and understood by yourself. There are 1,000 readers and 1,000 Hamlets, but there are many explanations.Vue official documentationVery comprehensive.
Vue is a popular front-end framework (gradual framework) in the past two years. This article will introduce to you the relevant content of vue cli's use of absolute paths to quote pictures. It is shared for your reference and learning. I won't say much below, let's take a look.
text:
Using absolute paths in pages can be introduced by using require() in js
data (){
return {
src: require('IMAGES/')
}
}
<img :src="src">
It seems that absolute paths cannot be used in the style, unless all the image resources are placed in static, then you can quote them like this.
background: url("/static/images/") no-repeat;
However, after putting it in static, webpack will only copy the resources to the publishing directory without optimizing the small image to base64.
In order to optimize image resources, it is still not suitable to put image resources into static. However, writing styles in the vue page style tag can be used as the directory deepens, the reference path is:
background: url("../../../images/") no-repeat;
There is a way that seems to save some trouble:
Put the style file into the style folder, use the relative path of the style image resource, and then use the src attribute to introduce the style in the style tag, so that too many layers of return can be avoided~~~
── src ── images ── ── style ──
/*style*/
background: url("../images/") no-repeat;
<style src="STYLE/index" lang="scss"></style>
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.