refactor: update asset URLs for vite-imagetools v5

Shorthand parameters have been removed as of vite-imagetools v5
This commit is contained in:
Sebin Nyshkim 2023-09-04 19:52:19 +02:00
parent d4dc47b1e1
commit 39993112b7
3 changed files with 17 additions and 17 deletions

View file

@ -3,12 +3,12 @@
<div class="welcome__image"> <div class="welcome__image">
<picture> <picture>
<source <source
srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset" srcset="@/assets/viktor-avatar.png?w=400;800&format=avif&quality=75&as=srcset"
/> />
<source <source
srcset="@/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset" srcset="@/assets/viktor-avatar.png?w=400;800&format=webp&quality=100&as=srcset"
/> />
<img src="@/assets/viktor-avatar.png?w=400&png" alt="Viktor Avatar" /> <img src="@/assets/viktor-avatar.png?w=400&format=png" alt="Viktor Avatar" />
</picture> </picture>
</div> </div>

View file

@ -23,21 +23,21 @@ const colors = [
<template v-if="$route.query.nsfw"> <template v-if="$route.query.nsfw">
<source <source
srcset=" srcset="
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
type="image/avif" type="image/avif"
/> />
<source <source
srcset=" srcset="
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
type="image/webp" type="image/webp"
/> />
<img <img
srcset=" srcset="
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
alt="Viktor Ref by sabertoofs" alt="Viktor Ref by sabertoofs"
@ -48,21 +48,21 @@ const colors = [
<template v-else> <template v-else>
<source <source
srcset=" srcset="
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
type="image/avif" type="image/avif"
/> />
<source <source
srcset=" srcset="
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
type="image/webp" type="image/webp"
/> />
<img <img
srcset=" srcset="
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px" sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
:alt="`${$t('anatomy.images.back.caption')} by sabertoofs`" :alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
@ -86,7 +86,7 @@ const colors = [
<template v-if="$route.query.nsfw"> <template v-if="$route.query.nsfw">
<source <source
srcset=" srcset="
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 710px, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
@ -96,7 +96,7 @@ const colors = [
/> />
<source <source
srcset=" srcset="
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 710px, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
@ -106,7 +106,7 @@ const colors = [
/> />
<img <img
srcset=" srcset="
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 710px, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
@ -120,7 +120,7 @@ const colors = [
<template v-else> <template v-else>
<source <source
srcset=" srcset="
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 710px, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
@ -130,7 +130,7 @@ const colors = [
/> />
<source <source
srcset=" srcset="
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 710px, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,
@ -140,7 +140,7 @@ const colors = [
/> />
<img <img
srcset=" srcset="
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
" "
sizes="(min-width: 64em) 710px, sizes="(min-width: 64em) 710px,
(min-width: 50em) 590px, (min-width: 50em) 590px,

View file

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import AttributionTable from "@/components/AttributionTable.vue"; import AttributionTable from "@/components/AttributionTable.vue";
import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&webp&quality=100&imagetools"; import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&format=webp&quality=100&imagetools";
import ViktorFront from "@/assets/viktor-front-SFW-alpha.png?w=400&webp&quality=100&imagetools"; import ViktorFront from "@/assets/viktor-front-SFW-alpha.png?w=400&format=webp&quality=100&imagetools";
const attributions = [ const attributions = [
{ {