Upstream image response failed in Next.js with Medium story API

I'm trying to use the Medium story API to fetch and display an image in my Next.js app, but I keep getting an "upstream image response failed" error. The error message looks like this:

upstream image response failed for https://cdn-images-1.medium.com/max/1024/1*M3RCzNQD96vHtVo0TSphVg.jpeg 403

I've checked the URL and it seems to be correct, but I can't figure out why the image isn't loading. Can anyone help me diagnose and fix this issue?

Code:

Here is the relevant code that I'm using to fetch and display the image:

articles.jsx

import ArticleCard from '../components/ArticleCard';
import styles from '../styles/ArticlesPage.module.css';

const ArticlesPage = ({ articles }) => {
  return (
    <>
      <h3>
        Recent Posts from{' '}
        <a
          href="https://medium.com/@yasmine.daly"
          target="_blank"
          rel="noopener"
          className={styles.underline}
        >
          Medium
        </a>
      </h3>
      <div className={styles.container}>
        {articles.map((article) => (
          <ArticleCard key={article.id} article={article} />
        ))}
      </div>
    </>
  );
};

export async function getStaticProps() {
  const res = await fetch(
    `https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@yasmine.daly`
  );

  const data = await res.json();

  return {
    props: { title: 'Articles', articles: data.items },
    revalidate: 60,
  };
}

export default ArticlesPage;

ArticleCard.jsx

import cheerio from 'cheerio';
import Image from 'next/image';
import striptags from 'striptags';
import EyeIcon from '../components/icons/EyeIcon';
import HeartIcon from '../components/icons/HeartIcon';
import CommentIcon from '../components/icons/CommentIcon';
import styles from '../styles/ArticleCard.module.css';

const ArticleCard = ({ article }) => {

  return (
    <div className={styles.container}>
      <a
        href={article.url}
        target="_blank"
        rel="noopener noreferrer"
      >
        <Image
          src={article.thumbnail}
          alt={article.title}
          width={300}
          height={150}
        />
        <h3 className={styles.title}>{article.title}</h3>
      </a>
      <div className={styles.content}>
        <p>{striptags(article.content.substr(0, 300))}...</p>
      </div>
    </div>
  );
};

export default ArticleCard;

Any help or advice would be greatly appreciated. Thank you!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/bv7VE2L