fix: moving images to static folder

[RingoTC]

Description

comment: # moving images to static folder and replace img element with next/image for loading optimization

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Screenshots

Before	After
"screenshot before"	"screenshot after"

How Has This Been Tested?

• Cypress integration
• Cypress component tests
• Jest unit tests

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[dadiorchen]

@RingoTC thank you for you contribution, why we change to use Image by next.js?

[RingoTC]

The next/image provides a good optimization for image loading. In the web-map-client project, for example,
<Image src={backgroundPic} alt="profile" />
which loads a huge background picture. Using img directly, the browser will show this background when it loads and require it anytime but next/image will introduce a lazy-load and progressive loading strategy which is important for pictures with big sizes.

Here is some information about the image optimization of next.js, https://nextjs.org/docs/pages/building-your-application/optimizing/images