Placeholder bilde når oppskrift mangler bilde

client/src/components/recipe/RecipeCard.tsx

@@ -1,6 +1,7 @@
 import type { Recipe } from '../../types/recipe';
 import { Link } from 'react-router';
 import { Rating } from '@mui/material';
+import { RecipeImage } from '../ui/RecipeImage';
 
 // Sier hva komponenten får inn.
 type RecipeCardProps = {
@@ -11,7 +12,7 @@ export function RecipeCard({ recipe }: RecipeCardProps) {
     return (
         <Link to={`/recipes/${recipe.id}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
             <article className="border border-olive rounded-lg p-4 text-black h-full bg-secondary/50 transition hover:shadow-lg hover:border-primary group flex flex-col">
-                <img className="w-full aspect-square object-cover rounded-md" src={recipe.imageUrl ?? '/images/placeholder.webp'} alt={recipe.title}/>
+                <RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full aspect-square rounded-md" />
                 <h3 className="text-lg font-semibold group-hover:underline min-h-14">{recipe.title}</h3>
                 <div className="flex justify-between">
                     <p>{recipe.prepTimeMinutes} minutter</p>

client/src/components/recipe/RecipeDetail.tsx

@@ -3,6 +3,7 @@ import RestaurantIcon from '@mui/icons-material/Restaurant';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { useState } from 'react';
 import { Rating } from '@mui/material';
+import { RecipeImage } from '../ui/RecipeImage';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
@@ -62,7 +63,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                 </div>
             </section>
             <section className="rounded-lg">
-                <img className="w-full h-72 object-cover bg-pink-dark rounded-lg" src={recipe.imageUrl ?? '/images/placeholder.webp'} alt={recipe.title}/>
+                <RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full h-72 rounded-lg" />
             </section>
             <section className="border border-olive rounded-lg p-4 bg-background">
                 <h2 className="text-2xl font-semibold">Ingredienser</h2>

client/src/components/slideshow/RecipeSlideshow.tsx

@@ -2,6 +2,7 @@ import type { Recipe } from '../../types/recipe';
 import useEmblaCarousel from 'embla-carousel-react';
 import { Link } from 'react-router';
 import { useEffect, useState } from 'react';
+import { RecipeImage } from '../ui/RecipeImage';
 import Autoplay from 'embla-carousel-autoplay';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import RestaurantIcon from '@mui/icons-material/Restaurant';
@@ -91,7 +92,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
                                     <Link to={`/recipes/${recipe.id}`} className="self-start rounded-full bg-olive-dark text-background px-4 py-2 text-sm md:text-base md:px-6 md:py-3 hover:opacity-90 flex items-center gap-1">Se oppskrift<ArrowForwardIcon/></Link>
                                 </div>
                                 {/* Tomt alternativ for bildet, ettersom tittelen allerede står rett ved siden av bildet. */}
-                                <img className="bg-olive-dark/10 order-first md:order-0 w-full h-80 md:h-full object-cover rounded-lg " src={recipe.imageUrl ?? '/images/placeholder.webp'} alt=""/>
+                                <RecipeImage imageUrl={recipe.imageUrl} alt="" className="order-first md:order-0 w-full h-80 md:h-full rounded-lg" />
                             </div>
                         </div>
                     ))}

client/src/components/ui/RecipeImage.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import RestaurantIcon from '@mui/icons-material/Restaurant';
+
+type RecipeImageProps = {
+  imageUrl: string | null | undefined;
+  alt: string;
+  className?: string;
+};
+
+// viser bildet til oppskriften eller en tegning hvis bildet mangler
+export function RecipeImage({
+  imageUrl,
+  alt,
+  className = '',
+}: RecipeImageProps) {
+  // bytter til tegning hvis bilde ikke finnes
+  const [failed, setFailed] = useState(false);
+
+  if (imageUrl && !failed) {
+    return (
+      <img
+        src={imageUrl}
+        alt={alt}
+        onError={() => setFailed(true)}
+        className={`object-cover ${className}`}
+      />
+    );
+  }
+
+  return (
+    <div
+      aria-hidden="true"
+      className={`flex items-center justify-center bg-secondary/50 ${className}`}
+    >
+      <div className="flex aspect-square h-[70%] items-center justify-center rounded-full border-3 border-olive-dark bg-background">
+        <div className="flex aspect-square h-2/3 items-center justify-center rounded-full border border-olive text-olive-dark">
+          {/* ikonet tilpasser seg til tallerkenen */}
+          <RestaurantIcon sx={{ width: '35%', height: '35%' }} />
+        </div>
+      </div>
+    </div>
+  );
+}