title: Images with credentials in NextJs
body: <p>I want to use Webp format for user's uploaded images in order to reduce bandwidth usage but I'm not really sure how to it with authorisation needed.</p>
  <p>I want to limit access and control who can see a user's images, I need to pass a token to my API. The problem is that sharing the url of the image can result in persons who do not have to credentials to see the picture if it's done like that :</p>
  <pre><code>&lt;img src={`${urlApi}/images/${imageId}/${token}`}/&gt;
  </code></pre>
  <p>I've seen <a href="https://stackoverflow.com/questions/27000152/set-custom-header-for-the-request-made-from-img-tag">how to set header for image tag</a> but I've no idea how to do it with NextJs (*) because of the nature of <a href="https://nextjs.org/docs/api-reference/next/image#loader" rel="nofollow noreferrer">build in  loader</a> which return an url and would face similar credentials problems</p>
  <p>What could be way to do this ? Any suggestions ?</p>
  <p>(*) Moreover, from what i've seen and the console warnings I had Next does not like to use img tag</p>