myPicture without js
This commit is contained in:
@@ -1,23 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class='{ thumb, img: true }'
|
<div :class='{ img: true, thumb }'>
|
||||||
:height="height" :width="width"
|
|
||||||
:style="backgroundPreview">
|
|
||||||
|
|
||||||
<img
|
<img
|
||||||
v-if='media'
|
v-if='media'
|
||||||
:class='{ "u-featured": true, loading: true }'
|
:class='{ "u-featured": true }'
|
||||||
:alt='media.name' :loading='lazy?"lazy":"eager"'
|
:alt='media.name' :loading='lazy?"lazy":"eager"'
|
||||||
:src="src"
|
:src="src"
|
||||||
:srcset="srcset"
|
:srcset="srcset"
|
||||||
itemprop="image"
|
itemprop="image"
|
||||||
:height="height" :width="width"
|
:height="height" :width="width"
|
||||||
:style="{ 'object-position': thumbnailPosition }"
|
:style="{ 'object-position': thumbnailPosition }">
|
||||||
onload="this.classList.remove('loading')">
|
|
||||||
|
|
||||||
<img v-else-if='!media && thumb' class='thumb' src="noimg.svg" alt=''>
|
<img v-else-if='!media && thumb' class='thumb' src="noimg.svg" alt=''>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
@@ -100,8 +94,4 @@ export default {
|
|||||||
aspect-ratio: 1.7778;
|
aspect-ratio: 1.7778;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img img.loading {
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user