Fix Next/Image warnings in the console.

[eleanorreem]

Overview

When you run yarn dev/ yarn build, you get a series of warnings about next/image. Recently in a PR, the next/image imports were upgraded from next/legacy/image to the new next/image import. However, the job was not completed and we are now getting warnings.

Reading: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#image-component https://nextjs.org/docs/messages/next-image-upgrade-to-13 https://nextjs.org/docs/pages/building-your-application/upgrading/version-13

Image with src "/_next/static/media/bloom_logo_white.2f93938b.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/bloom_logo_white.2f93938b.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/course_icon.4db39ce0.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/course_icon.4db39ce0.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/chat_icon.717888a9.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/chat_icon.717888a9.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/activities_icon.dbd7ec54.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/activities_icon.dbd7ec54.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/grounding_icon.ce194ab1.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/grounding_icon.ce194ab1.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/notes_from_bloom_icon.f368af7a.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/notes_from_bloom_icon.f368af7a.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/411x401/27f8994191/landing_page_illustration.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/411x401/27f8994191/landing_page_illustration.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/337x372/248358259a/icon_courses.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/336x316/1868a727e9/icon_chat.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/341x353/dcc8ca465e/icon_activities.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/392x316/4fa64da80d/icon_grounding.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/341x353/efc3c9aa21/icon_notes.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/155x145/b82b3e0294/pinkheartwhitebackground.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/155x145/8101c401c6/pinkplaypausewhitebackground.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/155x146/1474c308a2/pinkglobewhitebackground.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/3d1979a3cc/spanish_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/31fac9652c/hindi_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/01857246d8/french_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/f016b90b81/english_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/8525986682/portuguese_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x648/a871f5beeb/bloom_german-presenters.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/600x264/54a6e0cca8/leaf_mix_fire.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/128x112/02c4cc90e6/blue_person_with_tea.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/x/481d1f2336/illustration_person4_peach.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13

Action Items

• [ ] Look at the previous PR and issue instructions to see the details of the change that caused these warnings
• [ ] Make changes to fix warnings
• [ ] Ensure that no image layouts are broken by manually checking each page
• [ ] Run cypress tests to ensure that nothing is broken

[github-actions[bot]]

Thank you for your interest in contributing to Chayn! Please carefully read the CONTRIBUTING.md file and the README.md file for guidance. Let us know if you have any questions. Good luck!