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

In view of how to introduce pictures more elegantly into the Vue page, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

We will definitely use all kinds of pictures in our vue project, so how to make better use of picture resources. Here I would like to talk about my usual methods.

Error demonstration

Maybe it's often written in your code.

Export default {data () {return {src: require ('xxx.jpg')}

In webpack, require automatically processes resources, which is fine, but when you put it in vue's data, vue will traverse data and add responsiveness to src, but most of the time, this src does not need responsiveness, resulting in a waste of performance.

Through computed

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

Const src = require ('xxx.jpg') export default {computed: {src () {return src}

Computed has its own cache, which can reduce some performance waste.

When the picture remains the same, it is introduced directly.

Or

.bg {background:url ("xxx.jpg")}

When our picture will not change, it can be introduced directly, and there is no need to assign a variable.

Similarly, it is also better to dynamically display the picture by switching the class name.

Export default {data () {return {flag: true}} .bg1 {background:url ("xxx1.jpg")} .bg2 {background:url ("xxx2.jpg")} switch pictures through the css variable

This is just an idea that just came to my mind. Theoretically, the css variable can store anything, so can it store the image address?

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')}") `)} .bg {--bg:url ('xxx.jpg') Background-image:--bg;}

If the personal test is successful, this method is also available and is better than computed, after all, it is less expensive to manipulate css variables. One thing to note about this method is that pictures in css are usually written in url, so you need to concatenate a string url (your content).

Draw through css

This is actually a digression, sometimes some images can actually be drawn through css, such as the triangle in the following picture, Baidu will have a variety of css triangle generator, this kind of graphics with css will be better than the introduction of a picture.

Do not introduce pictures into the data of vue, or try to use css.

This is the answer to the question about how to introduce pictures more elegantly in the Vue page. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.