#how to properly use the next/image when getting the paths from a database

13 messages · Page 1 of 1 (latest)

brave condor
#

Hello guys!

I am creating a SSG site using the pages router. I am populating the pages with data from a database. That database also has the paths to the images I am trying to use. However when trying to use the Image component from nextjs I am getting the error to specify width and height.

I know what that error means, but how should I tackle my problem? I cant specify the width and height properties from the data im getting since im only getting the image paths. An example of how one of the cats cat.imageslook like is :

const images = ['/static/images/Elsa_forside-300x300.jpg', '/static/images/Elsa_02-1024x844.jpg', '/static/images/Elsa_04.jpg']

As you can see they are just paths. Im trying to programattically create profile pages for over 100 cats and all the pictures im gonna use is in that array. I would like to get the same benefits as you would get if you manually imported:

import ElsaForside from '../../static/images/Else_forside-300x300.jpg'```

Here is the code from the `[slug].tsx` file im using to create the seperate profile pages for each cat. ```js
function Cats({ cat }) {
  const profileImg = JSON.parse(cat.images)[0].split("/").at(-1);

  return (
    <>
          <p>{cat.name}</p>
          <Image
            src={`/static/images/${profileImg}`}
            alt={`${cat.name} picture`}
            width={300}
            height={300}
            className="rounded-full"
          />
    </>
  );
} ```

Anyone got some recommandation what I should do? Thanks in advance!
proper mesaBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

brave condor
#

how to properly use the next/image when getting the paths from a database

raw pebble
#
  1. Generally, we will also store the image width and height in the database.
  2. If you can't, fetch and determine the image size dynamically.

There are some packages like probe-image-size that allows you to get image size from a url or file.

#

Since App Router, you can directly await in server components, and read files from file system

brave condor
#

Its a SSG

raw pebble
#

Also:
3. Use fill and give it an aspect ratio

raw pebble
brave condor
#

Oki in getStaticProps then?

raw pebble
#

Yep, with something like fs.readFile

brave condor
#

Aight gotcha! Then I remake a new array with the sizes? And pass to the component ?

raw pebble
#

Correct.

brave condor
#

@raw pebble Alright thanks! i thought it was better to somehow import them like you would do when you dont need the widths and height. When you import tje image at the top. Cause its local images