title: What is the best way to have a fallback image in NextJS?
body: <p>Recently, I have been working on a project in NextJS which uses the YoutubeAPI to fetch video information, including thumbnail URLs.</p>
  <p>The thumbnail URL for a full resolution image looks like this:
  <code>https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg</code></p>
  <p>However, sometimes YouTube fails to generate a full-resolution image, and in that case, the image is not displayed on my webpage.</p>
  <p>In the case that the image with the URL <code>https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg</code> does not exist I wish to use another URL like <code>https://i.ytimg.com/vi/${videoId}/hqdefault.jpg</code></p>
  <p>What is the best way to handle this with <code>next/image</code>?</p>