# Image 阅读器
When we make a picture similar to a blog, news, or document, the image loaded is large, affecting the user's reading. You can use the v-image command to pass the appropriate parameters to achieve the lazy loading effect.
# Basic usage
In some cases we need to do a lazy loading of an image, just mount the v-image directive on the img tag and pass the data-preview-src property, which will get when you click on the image. The value of data-preview-src is then given to the popup.
Note: In the img tag you can use `data-preview-src` to specify the image to load or specify on the v-image directive
<template>
<img v-image data-preview-src="/CSS.jpg" src="/CSS-min.jpg" alt="CSS">
<img v-image="'/CSS.jpg'" src="/CSS-min.jpg" alt="CSS">
</template>
# Used in chapters Pending
If there are multiple images in the article and it takes a lot of bandwidth to load, then we can split the resources into compressed and uncompressed versions, then use rule to configure the loading rules to load different resources to optimize the loading speed of the article.
HTML is well known as the native language for web content—but its close counterpart CSS (Cascading Style Sheets) is the language used to style, format, and present it. CSS is incredibly powerful. It also has a reputation for being tricky to learn and even harder to master, but that’s not necessarily true. CSS is straightforward to learn if you slow down and take it step by step. And it’s extremely helpful to know, even if you aren’t planning a career in web design.
<template>
<div v-image>
<img src="/CSS.jpg" alt="https://linkorg.club" :data-preview-src="img[0]">
HTML is well known as the native language for web content—but its close counterpart CSS (Cascading Style Sheets) is the language used to style, format, and present it. CSS is incredibly powerful. It also has a reputation for being tricky to learn and even harder to master, but that’s not necessarily true. CSS is straightforward to learn if you slow down and take it step by step. And it’s extremely helpful to know, even if you aren’t planning a career in web design.
<img src="/CSS-1.jpg" alt="https://linkorg.club" :data-preview-src="img[1]">
</div>
</template>
<script>
export default {
data() {
return {
img: ['/CSS-min.jpg', '/CSS-min-1.jpg']
}
}
}
</script>