jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Ensure product images conditional rendering in astro file

Browse source 
Updated 'src/pages/products/[...slug].astro' to conditionally render product images only when they exist. Prevents potential errors or breaks in layout when there is an absence of either 'first' or 'second' blueprint images for a particular product.
This commit is contained in:
Emil Gulamov 2024-02-16 19:39:52 +04:00
parent 502aee8b33
commit c14e7fbdb3
1 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/pages/products/[...slug].astro
View file

@ -168,21 +168,25 @@ const { product } = Astro.props;
<div
class="relative left-12 top-12 z-10 -ml-12 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 lg:ml-0"
>
{product.data.blueprints.first &&
<Image
src={product.data.blueprints.first}
class="h-full w-full object-cover object-center"
alt="Blueprint Illustration"
format={"avif"}
/>
}
</div>
<div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
{product.data.blueprints.second &&
<Image
src={product.data.blueprints.second}
class="h-full w-full object-cover object-center"
alt="Blueprint Illustration"
format={"avif"}
/>
}
</div>
</div>
</div>