Изображения являются неотъемлемой частью любого пользовательского интерфейса. Они улучшают пользовательский опыт и повышают вовлеченность. Изображение можно использовать вместе с текстом для объяснения концепции или быстрой передачи информации, поскольку люди склонны быстрее обрабатывать визуальную информацию. В этой статье мы узнаем, как отобразить изображение в Vuetify с помощью компонента v-img.
Компонент изображения Vuetify
Vuetify предоставляет компонент v-img для представления изображения. Этот компонент поставляется с различными реквизитами для настройки внешнего вида изображения.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-img contain max-height="300" min-height="300" src="https://picsum.photos/1920/1080?random" ></v-img> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Соотношение сторон изображения в Vuetify
Используйте параметр соотношения сторон компонента v-img, чтобы установить фиксированное соотношение сторон. Соотношение между высотой и шириной остается неизменным при изменении размера изображения.
<template> <v-app> <div class="d-flex flex-column justify-space-between align-center ma-4"> <v-slider v-model="width" class="align-self-stretch" min="200" max="500" ></v-slider><v-img :aspect-ratio="16 / 9" :width="width" src="https://picsum.photos/1920/1080?random" ></v-img> </div> </v-app> </template><script> export default { name: 'App', data: () => ({ width: 300, }), }; </script>
Vuetify изображение содержит
Когда предоставленное соотношение сторон не соответствует реальному изображению, компонент v-img заполнит все пространство и обрежет стороны изображения. Установка свойства contain на true предотвратит это, но по бокам останется пустое пространство.
<template> <v-app> <v-container fluid> <v-row justify="space-around"> <v-col cols="5"> <div class="text-h6 mb-1">Default (cover)</div> <div class="subheading">Matching</div> <v-img src="https://picsum.photos/510/300?random" aspect-ratio="1.7" ></v-img> <div class="subheading pt-4">Too high</div> <v-img src="https://picsum.photos/510/300?random" aspect-ratio="2" ></v-img> <div class="subheading pt-4">Too low</div> <v-img src="https://picsum.photos/510/300?random" aspect-ratio="1.4" ></v-img> </v-col><v-col cols="5"> <div class="text-h6 mb-1">Contain</div> <div class="subheading">Matching</div> <v-img src="https://picsum.photos/510/300?random" aspect-ratio="1.7" contain ></v-img> <div class="subheading pt-4">Too high</div> <v-img src="https://picsum.photos/510/300?random" aspect-ratio="2" contain ></v-img> <div class="subheading pt-4">Too low</div> <v-img src="https://picsum.photos/510/300?random" aspect-ratio="1.4" contain ></v-img> </v-col> </v-row> </v-container> </v-app> </template><script> export default { name: 'App', }; </script>
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Получите бесплатную копию здесь.
Vuetify Градиент изображения
Используйте реквизит gradient, чтобы применить простое наложение градиента к изображению. Вместо этого для более сложных градиентов мы можем использовать класс CSS.
<template> <v-app> <v-row class="ma-4"> <v-col cols="6" sm="4"> <v-img src="https://picsum.photos/1920/1080?random" gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.7)" ></v-img> </v-col><v-col cols="6" sm="4"> <v-img src="https://picsum.photos/1920/1080?random"> <div class="fill-height bottom-gradient"></div> </v-img> </v-col><v-col cols="6" sm="4"> <v-img src="https://picsum.photos/1920/1080?random"> <div class="fill-height repeating-gradient"></div> </v-img> </v-col> </v-row> </v-app> </template><script> export default { name: 'App',}; </script><style scoped> .bottom-gradient { background-image: linear-gradient( to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px ); }.repeating-gradient { background-image: repeating-linear-gradient( -45deg, rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25) 5px, rgba(0, 0, 255, 0.25) 5px, rgba(0, 0, 255, 0.25) 10px ); } </style>
Vuetify Высота изображения
Компонент изображения Vuetify автоматически увеличивается до размера src и сохраняет правильное соотношение сторон. Мы можем использовать свойства height и max-height, чтобы ограничить это:
<template> <v-app> <v-container class="fill-height" fluid> <v-fade-transition mode="out-in"> <v-row> <v-col cols="6"> <v-card> <v-img src="https://picsum.photos/350/165?random" height="125" class="grey darken-4" ></v-img> <v-card-title class="text-h6"> height </v-card-title> </v-card> </v-col><v-col cols="6"> <v-card> <v-img src="https://picsum.photos/350/165?random" height="125" contain class="grey darken-4" ></v-img> <v-card-title class="text-h6"> height with contain </v-card-title> </v-card> </v-col><v-col cols="6"> <v-card> <v-img src="https://picsum.photos/350/165?random" max-height="125" class="grey darken-4" ></v-img> <v-card-title class="text-h6"> max-height </v-card-title> </v-card> </v-col><v-col cols="6"> <v-card> <v-img src="https://picsum.photos/350/165?random" max-height="125" contain class="grey darken-4" ></v-img> <v-card-title class="text-h6"> max-height with contain </v-card-title> </v-card> </v-col> </v-row> </v-fade-transition> </v-container> </v-app> </template><script> export default { name: 'App', }; </script>
Заполнитель изображения Vuetify
Мы можем использовать слот-заполнитель v-img для отображения пользовательского контента во время загрузки изображения. Изображение в приведенном ниже примере имеет неправильный src и не загружается, поэтому мы можем видеть заполнитель.
<template> <v-app> <v-row justify="center" class="ma-4"> <v-img src="https://bad.src/not/valid" lazy-src="https://picsum.photos/id/12/100/60" max-width="500" max-height="300" > <template v-slot:placeholder> <v-row class="fill-height ma-0" align="center" justify="center"> <v-progress-circular indeterminate color="grey lighten-5" ></v-progress-circular> </v-row> </template> </v-img> </v-row> </v-app> </template><script> export default { name: 'App', }; </script>
Создание галереи изображений
Мы можем использовать компонент v-img для создания галереи изображений.
<template> <v-app> <v-row class="ma-4"> <v-col v-for="n in 6" :key="n" class="d-flex child-flex" cols="4"> <v-img :src="`https://picsum.photos/500/300?image=${n * 12 + 5}`" :lazy-src="`https://picsum.photos/10/6?image=${n * 12 + 10}`" aspect-ratio="1" class="grey lighten-2" > <template v-slot:placeholder> <v-row class="fill-height ma-0" align="center" justify="center"> <v-progress-circular indeterminate color="grey lighten-5" ></v-progress-circular> </v-row> </template> </v-img> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', }; </script>
Заключение
Изображения являются важной частью каждого интерфейса, они могут помочь повысить вовлеченность, украсить пользовательский интерфейс и позволить пользователям быстрее обрабатывать информацию. Мы можем использовать компонент изображения Vuetify (v-img) для отображения изображений и настройки способа их отображения.
Еженедельно получайте советы и руководства по Vuetify, Vue, JavaScript и другим ресурсам:http://eepurl.com/hRfyJL
Обновлено на: codingbeautydev.com
