Dynamic image rendering with react router

#1

Hello everyone, I found a really cool web page on code sandbox and was hoping for a little help understanding it.
Full Code: https://codesandbox.io/s/framer-motion-x-react-router-n7qhp?file=/src/index.js
So from what I understand the code here dynamically renders a router-page based off of the image id.

<Link to={`/image/${i}`}>
          <motion.img
            src={`https://static1.squarespace.com/static/5b475b2c50a54f54f9b4e1dc/t/${id}.jpg?format=1500w`}
            alt="The Barbican"
            variants={imageVariants}
            transition={transition}
          />
        </Link>

And then makes the page with a single image

<motion.div className="single" initial="exit" animate="enter" exit="exit">
    <motion.img
      variants={imageVariants}
      src={`https://static1.squarespace.com/static/5b475b2c50a54f54f9b4e1dc/t/${
        images[parseInt(match.params.id, 10)]
      }.jpg?format=1500w`}
      alt="The Barbican"
    />
    <motion.div className="back" variants={backVariants}> Well lets see
      <Link to="/">← Back</Link>
    </motion.div>

Using a javascript file with the image src’s in it.

export const images = [
    "5b5a3938562fa764113169a6/1532639559620/DSCF3338",
    "5b5a3628f950b7390fbfc5f8/1532639027872/DSCF3246",
    "5b5a3741575d1fccb5ac6b3f/1532639066455/DSCF3268",
    "5b5a376b0e2e728eeeaca8e4/1532683586969/DSCF3274",
    "5b5c228403ce64f3c80d4d8e/1532764845121/DSCF3348",
    "5b5a3b800e2e728eeead9575/1532640158813/DSCF3375"
  ];

I really like this code, however when I tinker with it I can never seem to get the images to work. I would like to replace the images without breaking the whole thing, does anyone have an idea how I would be able to do this?
Thank you for your expertise.

#2

Can you show an example of what you have tried?

If you use an URL that has an id part you just replace the id with that. Otherwise, if you use full URL strings you willl just remove the template string and use id and images[parseInt(match.params.id, 10)] for the src.

Here is an example using unsplash, I didn’t bother messing with the image dimensions so they are not equal height.

Using ids

Using full URLs

1 Like
#3

This is exactly what I needed. Thanks for doing this. I will reverse engineer your methods and better understand them.

#4

I do have one follow up question if you don’t mind. I am trying to use images on my machine, it works great for the thumbnails but the expanded images are only giving the src as 1, 2, 3, or 4.
I know these are the Ids of the photos which is helpful, but is there a way I can get the url to show where the id is showing?

#5

When you say the src, are you saying the single images do not load because you are not getting the correct image path, or are you just talking about the URL shown in the SingleImage component when clicking the images?

The numbers in the URL for the single image is the index of the images array passed to /:id in the router.

1 Like
#6

I actually figured out my error earlier, I appreciate your help!

#7