myPicture without js

This commit is contained in:
lesion
2022-05-09 16:31:53 +02:00
parent 2e365ab698
commit 7c75ac3e56

View File

@@ -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>