ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-06 02:26:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add explicit image dimensions

Browse source
This commit is contained in:
Ruidy 2024-12-16 09:39:57 +01:00
parent 34a1f62813
commit 7c4f6419cd
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
6 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/app/navbar.vue
View file

@ -71,7 +71,7 @@ if (route.path === "/search") {
</ul> </ul>
</div> </div>
<nuxt-link to="/" class="btn btn-ghost text-xl"> <nuxt-link to="/" class="btn btn-ghost text-xl">
<nuxt-img src="/logo192.png" width="50" alt="logo" /> <nuxt-img src="/logo192.png" width="50" height="50" alt="logo" />
<span style="font-family: cursive"> Chefs </span> <span style="font-family: cursive"> Chefs </span>
</nuxt-link> </nuxt-link>
</div> </div>

2
components/recipe/card.vue
View file

@ -16,6 +16,8 @@ defineProps<{
:src="pictureUrl" :src="pictureUrl"
alt="`${title} picture`" alt="`${title} picture`"
:placeholder="[300]" :placeholder="[300]"
width="300"
height="300"
format="webp" format="webp"
/> />
</figure> </figure>

4
pages/categories/[name].vue
View file

@ -35,7 +35,7 @@ useSeoMeta({
class="hero h-[40vh] bg-cover bg-center relative" class="hero h-[40vh] bg-cover bg-center relative"
:style="`background-image: url(${category!.picture})`" :style="`background-image: url(${category!.picture})`"
> >
<div class="hero-overlay bg-opacity-60"></div> <div class="hero-overlay bg-opacity-60" />
<div class="hero-content text-center text-neutral-content"> <div class="hero-content text-center text-neutral-content">
<h1 class="text-5xl font-bold">{{ category?.name || categoryName }}</h1> <h1 class="text-5xl font-bold">{{ category?.name || categoryName }}</h1>
</div> </div>
@ -64,6 +64,8 @@ useSeoMeta({
:src="recipe.pictureUrl" :src="recipe.pictureUrl"
:alt="recipe.title" :alt="recipe.title"
:placeholder="[300]" :placeholder="[300]"
height="300"
width="300"
format="webp" format="webp"
/> />
</figure> </figure>

2
pages/categories/index.vue
View file

@ -42,6 +42,8 @@ useSeoMeta({
:src="category.picture" :src="category.picture"
:alt="category.name" :alt="category.name"
:placeholder="[160, 100]" :placeholder="[160, 100]"
height="100"
width="160"
format="webp" format="webp"
loading="lazy" loading="lazy"
/> />

2
pages/index.vue
View file

@ -23,6 +23,8 @@ useSeoMeta({
class="max-w-sm h-[50vh] lg:h-[80vh] object-contain rounded-lg" class="max-w-sm h-[50vh] lg:h-[80vh] object-contain rounded-lg"
:placeholder="[400, 800]" :placeholder="[400, 800]"
format="webp" format="webp"
height="800"
width="400"
/> />
<div class="flex flex-col justify-center"> <div class="flex flex-col justify-center">
<h1 class="text-5xl font-bold prose">Eat Something New</h1> <h1 class="text-5xl font-bold prose">Eat Something New</h1>

3
pages/search.vue
View file

@ -49,6 +49,9 @@ watch(searchQuery, async (newQuery) => {
:alt="recipe.title" :alt="recipe.title"
format="webp" format="webp"
loading="lazy" loading="lazy"
:placeholder="[350]"
height="350"
width="350"
/> />
</figure> </figure>
<div class="card-body"> <div class="card-body">