🖥️ Load and display game images

In this guide, we will learn how to load and display game images from the database. In the previous guide, we added an imageUrl field to our Game model. Now, we’ll update our application to fetch and display these images.

Start the development server

If you need to, start the development server by running the following command in your terminal:

npm run dev

Step 1: Update the GameCard Component Props

Challenge

First, we need to update our GameCard component to accept an image URL as a prop.

Open app/components/GameCard.tsx and see if you can update the GameCard component to accept an imageUrl prop.

Note

Remember you will need to:

• add the imageUrl prop to the GameCardProps interface. But what type should it be?
• update the GameCard function to accept the imageUrl prop as an argument

Caution

When you add imageUrl to the GameCard component props, you will see a red line appear under it.

Don’t worry about this for now - we will fix it in the next step.

When you are ready, compare your solution to the one below:

app/components/GameCard.tsx

interface GameCardProps {
  title: string;
  releaseDate: string;
  genre: string;
  imageUrl: string;
}
export default function GameCard({ title, releaseDate, genre }: GameCardProps) {
export default function GameCard({
  title,
  releaseDate,
  genre,
  imageUrl,
}: GameCardProps) {
  const formattedDate = releaseDate.substring(0, 10);

Note

We’ve added a new imageUrl prop to our GameCardProps interface and updated the function parameters to include this new prop. We’re also using a more readable multi-line format for the function parameters since we now have more props.

Update GameCard component

Step 2: Use the Image Prop in the Component

Next, we need to update the JSX in our GameCard component to use the image URL passed as a prop instead of the placeholder image.

Challenge

Can you update the GameCard component to use the imageUrl prop instead of the placeholder image?

Tip

• You will need to use the imageUrl prop as the src attribute of the <img> element.
• Because this is a variable and not a string, you will need to use curly braces to embed it in the JSX.
• You will also need to update the alt attribute to include the game title. How could you do this?

Caution

Even if you get the solution correct, you won’t actually see the images yet.

This is because we need to update the Prisma query to include the image URL, which we will do in the next step.

When you are ready, compare your solution to the one below:

app/components/GameCard.tsx

return (
  <div className="flex flex-col gap-4">
    <div className="relative h-72 overflow-hidden">
      <img
         src="https://picsum.photos/400/300"
         alt="Game Cover"
         src={imageUrl}
         alt={`${title} cover`}
        className="absolute inset-0 w-full h-full object-cover rounded-xl"
      />
    </div>

Note

We’re replacing the hardcoded placeholder image URL with the dynamic imageUrl value that we’re receiving as a prop. We’re also making the alt text more descriptive by including the game title, which improves accessibility.

Use image prop

Step 3: Update the Prisma Query to Include Image Data

Now, we need to update our Prisma query in the loader function to include the image field for each game.

Head back to your app/routes/_index.tsx file and update the Prisma query as follows:

app/routes/_index.tsx

import { PrismaClient } from "@prisma/client";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import type { MetaFunction } from "@remix-run/node";
import GameCard from "~/components/GameCard";
import gamelogFallback from "~/assets/svg/gamelog-fallback.svg"; // You will need to add your own image here

export async function loader() {
  const prisma = new PrismaClient();

  const games = await prisma.game.findMany({
    select: {
      id: true,
      title: true,
      releaseDate: true,
      imageUrl: true,
      category: {
        select: {
          title: true,
        },
      },
    },
  });

  return json({ games });
}

Note

We’ve added the imageUrl field to our Prisma query’s select object. This ensures that the image URL is included in the data returned from the database.

We’re also importing a fallback image that we’ll use in place of games that don’t have an image.

You will need to add your own fallback image to the assets folder for this to work.

Below is an example of a fallback image I created (feel free to use it if you want!)

Step 4: Pass the Image URL to the GameCard Component

Finally, we need to update our index route to pass the image URL to the GameCard component.

app/routes/_index.tsx

{games.map((game) => (
  <div key={game.id}>
    <GameCard
      key={game.id}
      title={game.title}
      releaseDate={game.releaseDate}
       imageUrl={game.imageUrl || gamelogFallback}
      genre={game.category?.title || "Unknown"}
    />
  </div>
))}

Note

We’re passing the game.imageUrl value as the imageUrl prop to the GameCard component. We’re also using the logical OR operator (||) to provide a fallback image (gamelogFallback) in case a game doesn’t have an image URL. This ensures that our UI always displays an image, even if the data is incomplete.

What We’ve Learned

In this tutorial, we’ve:

1. Updated our GameCard component to accept an image URL as a prop
2. Modified the component to use the provided image URL instead of a placeholder
3. Updated our Prisma query to include the image field in the data returned from the database
4. Added a fallback image for games that don’t have an image URL

These changes allow our application to display actual game images from our database, making our UI more visually appealing and informative:

Excellent work!

You’ve successfully updated your application to load and display game images from the database. This is a significant improvement to your UI, making it more engaging and informative for users. Remember that handling images is an important aspect of web development, and there are many techniques and best practices to consider as you continue to enhance your application.

Click to reveal