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