1

I'm trying to get a simple next/image component displaying properly but the images just won't load. I'm using nextjs 13 which was just released so this is a new version of the component.

I'm using sanity.io on the back and my images are stored there. I'm unclear as to whether this issue is caused by the new next/image component or if something is going wrong with my code. The src and alt props are getting passed properly and the source seems to be registering properly (image below) but the the image isn't displaying.

/app/Figure.tsx:

"use client";
import Image from "next/image";

interface Props {
  src: string;
  alt: string;
  width: number;
  height: number;
}

export default function Figure(props: Props) {
  return (
    <figure>
      <style jsx>{`
        figure {
          position: relative;
          width: 100%;
          margin: 0;
          padding-top: ${((props.height / props.width) * 100).toFixed(2)}%;
        }
      `}</style>
      <Image src={props.src} alt={props.alt} fill />
    </figure>
  );
}

next.config.js:

  images: {
    domains: ["cdn.sanity.io", "images.pexels.com"],
  },

Result enter image description here enter image description here

Matthew Parisien
  • 25
  • 1
  • 5

1 Answers1

2

If you're fetching an image directly, you'll need to translate the fetched data response to a blob and then create an object URL (URL.createObjectURL) for the Image tag to use as the source.

I've made a Stackblitz demo as well.

import Image from 'next/image';
import React from 'react';
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.blob());

export default function App() {
  const url = 'https://source.unsplash.com/random';
  const { data, error } = useSWR(url, fetcher);

  if (error) return 'An error has occurred.';
  if (!data) return 'Loading...';

  const dataUrl = URL.createObjectURL(data);

  return (
    <figure>
      <style jsx>{`
      figure {
        position: relative;
        width: 100%;
        margin: 0;
        padding-top: ${((200 / 200) * 100).toFixed(2)}%;
      }
    `}</style>
      <Image src={dataUrl} alt={'test'} fill />
    </figure>
  );
}
l1qu1d
  • 376
  • 2
  • 9
  • My
    in the example above is already doing that. I can see that my figure has a width and height in devtools but the image isn’t loading in the network tab
     – Matthew Parisien Oct 29 '22 at 22:42
  • Your `
    ` doesn't have a `height` property in your code example.
     – l1qu1d Oct 29 '22 at 23:02
  • I believe the padding is setting it’s height? – Matthew Parisien Oct 29 '22 at 23:14
  • Ok. I made a mockup demo in the updated answer. It looks like you can use padding, but padding shouldn't be used that way. Padding should be used to create padding not set widths and heights of objects. – l1qu1d Oct 30 '22 at 00:16
  • What specifically are you wanting to learn more about? React, SWR, Next.js, Sanity, Javascript? Most have documentation directly on their website. As of now, Next.js 13 has most of its documentation on the beta site: https://beta.nextjs.org/docs. – l1qu1d Oct 30 '22 at 18:26