How to introduce pictures more elegantly in Vue pages

When we write vue projects, we will definitely use various pictures, so how can we better use picture resources? Here I will talk about the method I often use.

Error demonstration

Maybe you often write this in your code

<template>
    <img :src="src">
</template>
<script>
    export default{
        data(){
            return {
               src: require('xxx.jpg')
            }
        }
    }
</script>

In webpack, require will automatically process resources, which is fine. However, when you put it in vue's data, vue will traverse the data and add responsiveness to src. But most of the time, this src does not need to be responsive, which causes performance waste.

By computed

To solve the above error solution, one of the solutions is: computed

<template>
    <img :src="src">
</template>
<script>
   const src = require('xxx.jpg')
    export default{
        computed:{
           src(){
             return src
           }
        }
    }
</script>

Compute itself has a cache, which can reduce some performance waste

When the image does not change, import it directly

<template>
    <img :src="src">
</template>

or

<template>
    <div class="bg"></div>
</template>

<style>
 .bg{
 background:url("xxx.jpg")
 }
</style>

When our image does not change, we can import it directly without assigning a variable.

Similarly, you can also dynamically display images by switching class names, which is also better.

<template>
    <div :class="flag ? 'bg1':'bg2'"></div>
</template>
<script>
    export default{
     data(){
            return {
               flag: true
            }
        }
    }
</script>
<style>
 .bg1{
 background:url("xxx1.jpg")
 }
 .bg2{
 background:url("xxx2.jpg")
 }
</style>

Switching images via CSS variables

This is just an idea that I just thought of. Theoretically, CSS variables can store anything, so can they store image addresses?

<template>
    <div class="bg"></div>
</template>
<script>
    export default{
        mounted(){
           // The first method, image address or base64
           this.$el.style.setProperty('--bg',`url("http://xxx.com/1.jpg")`)
           // The second method this.$el.style.setProperty('--bg',`url("${require('../assets/1.png')}")`)
           
        }
    }
</script>    
<style>
 .bg{
     --bg:url('xxx.jpg');
     background-image:--bg;
 }
</style>

My personal test was successful, this method is also available, and it is better than computed, after all, operating CSS variables costs less. What needs to be noted in this method is that images in CSS are generally written in URLs, so you need to concatenate a string URL (your content).

Drawing via CSS

This is actually a digression. Sometimes some images can actually be drawn using CSS. For example, the triangle in the picture below. If you search on Baidu, you will find various CSS triangle generators. This kind of graphic is better drawn using CSS than introducing a picture.

To sum up, don't introduce pictures in vue's data, and try to use css

Summarize

This is the end of this article about how to introduce pictures more elegantly in Vue pages. For more relevant content about how to introduce pictures more elegantly in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!