Image Hashing is not happening on static image when serving from AWS S3

[yashvekaria]

I want to serve all static resources like fonts and images from the CDN server. So currently static images and fonts lie under /public/images and /public/fonts. On build, Next.js will hash every image and font under .next/static/media. As shown in the image below.

Now as per the Asset Prefix document, I have also added a CDN path in the next.config.js

const getCDN = () => {
  if (process.env.NEXT_PUBLIC_APP_ENV === 'staging') {
    return 'https://cdn.staging.mydomain.com.au/';
  }

   if (process.env.NEXT_PUBLIC_APP_ENV === 'production') {
    return 'https://cdn.mydomain.com/';
  }
};

module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: getCDN(),
}

Also, I have copied all .next/static folder content and uploaded it to S3 under mydomain/_next/static. S3 Path looks like below

s3://mydomain/_next/static/logo.68a3dfc9.png

Now the logo image code looks like

 <Image
      layout="fixed"
      width={90}
      height={34}
      src={'images/logo.png'}
      alt="realestateview.com.au logo"
      />

But after building it nothing had changed

<img alt="mydomain.com logo" src="/images/logo.png" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%">

Am I missing something ? What do I need to do to serve that logo image from CDN and that hash? The desired image tag should be as shown below.

<img alt="mydomain.com logo" src="https://cdn.mydomain.com/_next/static/media/logo.68a3dfc9.png" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%">

[wwwdepot]

What is the build step? Could be missing build-time environment variables.

[masterkingmk]

thanks

…

Sent from my iPhone

On 9 Jan 2023, at 7:21 PM, Yash Vekaria ***@***.***> wrote:  I want to serve all static resources like fonts and images from the CDN server. So currently static images and fonts lie under /public/images and /public/fonts. On build, Next.js will hash every image and font under .next/static/media. As shown in the image below. Now as per the Asset Prefix document, I have also added a CDN path in the next.config.js const getCDN = () => { if (process.env.NEXT_PUBLIC_APP_ENV === 'staging') { return 'https://cdn.staging.mydomain.com.au/'; } if (process.env.NEXT_PUBLIC_APP_ENV === 'production') { return 'https://cdn.mydomain.com/'; } }; module.exports = { // Use the CDN in production and localhost for development. assetPrefix: getCDN(), } Also, I have copied all .next/static folder content and uploaded it to S3 under mydomain/_next/static. S3 Path looks like below s3://mydomain/_next/static/logo.68a3dfc9.png Now the logo image code looks like <Image layout="fixed" width={90} height={34} src={'images/logo.png'} alt="realestateview.com.au logo" /> But after building it nothing had changed <img alt="mydomain.com logo" src="/images/logo.png" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"> Am I missing something ? What do I need to do to serve that logo image from CDN and that hash? The desired image tag should be as shown below. <img alt="mydomain.com logo" src="https://cdn.mydomain.com/_next/static/media/logo.68a3dfc9.png" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"> — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.

[ke1vin4real]

Did you solve it?

[ke1vin4real]

Use static import to set src instead of string attr