Prismic responsive images using with Next.js

Hello! I'm using Prismic with Next.js application and I have a requirement that it should be possible to display different images on the desktop and mobile versions of the application
I assumed that to solve this problem you need to use a responsive view that can be configured for the image field in the slice machine
Having configured two variations of images (For computers and mobile devices), I added the corresponding images to the slice
To display the image I use
But as far as I understand, it does not take into account the response of the image
The expected result was that the srcSet would contain a link to different images depending on the screen, but this is not the case.
The resulting result is srcSet getting a link to only one of the images
Having studied a little the data that I receive from Prismic, I found out that the link to the image for the mobile device is received, but ignores it
I would like to get some advice, is this a bug? Perhaps I missed something?
If this doesn't work as I expected, is there a ready-made solution for this?

Hi Aleks,

I need to understand a little better. Tell me which scenario describes your project:

  • You want to display two completely different images on mobile and desktop (e.g. an image of a cat on mobile and an image of a dog on desktop)
  • You want to display images with different crops on mobile and desktop (e.g. a square on mobile and a rectangle on desktop)
  • You want ot display different sizes on mobile and desktop (e.g. 400px wide on mobile and 800px wide on desktop)

Also, if you can include any screenshots, that might help me understand :slight_smile: