microsoft / ApplicationInsights-node.js

Microsoft Application Insights SDK for Node.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

NextJs images not showing in Azure

joshuaolusayo opened this issue · comments

I deployed nextjs to azure but after the build, the image sizes are 0B. Image is not showing in product but if I add the following to next.config.js file, it works
{ images: { unoptimized: true } }

@joshuaolusayo Can you provide some more details about your deployment here? Information like your package.json and initialization of Application Insights would be helpful. Thanks!

@JacksonWeber I am using NextJs of 13.x. When I switched to version 14 also, it also did not work.

This is from my package.json:

"next": "13.5.6",
"react": "^18",
image This is a screenshot of the build output... The images are showing 0B. I guess this is the reason why they are not showing inside the webapp... but then, after adding { images: { unoptimized: true } } inside next.config.js, it all works file

@joshuaolusayo Do you believe this issue is related to Application Insights? Or are you just having trouble deploying next.js apps in general to Azure App Service without using the unoptimized: true flag on your containers?

@JacksonWeber I believe it has to do with Azure. Image optimization is not working when using NextJs Image component (next/image). The only workaround is to add unoptimize of true to next config which removes the optimization on all images (a great feature that's part of my reason for considering NextJs). Without adding that in next config, none of the images are shown

@joshuaolusayo I see. That makes sense. Are you having any issues with Application Insights? This seems to be an issue relating to App Service image deployment. Unless you believe otherwise, can I close this issue?

@JacksonWeber You're absolutely right... but will closing the issue helps in resolving it?

@joshuaolusayo This issue should be reported via a ticket in the Azure Portal. This repository can specifically help with issues directly relating to the usage of the Application Insights SDK.

Oh! I get... Please, is there a link that could help to report the issue? Thank you so much for the help so far

Thank you @JacksonWeber . You can close this issue now