fix: 🔧 unset image optimization

[JohnsonMao]

Why need this change? / Root cause:

• Fixing the issue of external images not displaying.
• Reducing server traffic generated by image optimization.

Changes made:

• next.config.js

Test Scope / Change impact:

Issue

• Close fix: 遊戲圖片無法顯示 #316

Note

關於之前說 image 優化是否會造成 server 流量增加，我後來查閱了官方文件與原始碼，發現使用外部圖片時，會 fetch 外部圖片並進行圖片優化，故應該是會造成 server 流量增加，所以目前的解決方案改成取消圖片優化 (image optimization) 這個功能，未來如果有效能問題或想優化本地圖片，可以慢慢針對特定圖片進行優化，如 <Image unoptimized={false} />。

Reference

• minimizing-image-optimization-costs
• billing
• image-optimizer

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
game-lobby-web	✅ Ready (Inspect)	Visit Preview	Sep 15, 2023 9:25am

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[GaaSBot]

✅ Knip Scan Result for 2559f25

Unused files (10)

Unused files (10)
.bundlewatch.config.js
components/shared/Chat/ChatContent.tsx
components/shared/Chat/ChatMessage.tsx
components/shared/Chat/index.tsx
components/shared/Icon/group/news.tsx
configs/i18nConfigs.ts
lighthouserc.js
reset.d.ts
scripts/knipScanReporter.js
scripts/lhciScanReporter.js

Unused dependencies (2)

Unused dependencies (2)
@svgr/webpack package.json
sharp package.json

Unused devDependencies (5)

Unused devDependencies (5)
@actions/github package.json
@octokit/core package.json
@storybook/blocks package.json
@storybook/testing-library package.json
@total-typescript/ts-reset package.json

Configuration issues (1)

Configuration issues (1)
Unused item in ignoreDependencies: @next/bundle-analyzer

[GaaSBot]

🤖 Lighthouse Scan Result for 2559f25

/rooms

Metric	Value
Performance	63
Seo	80
Accessibility	77
HTML Report for LHCI Scan	Report Link

/rooms/abc

Metric	Value
Performance	74
Seo	80
Accessibility	66
HTML Report for LHCI Scan	Report Link

/login

Metric	Value
Performance	46
Seo	80
Accessibility	94
HTML Report for LHCI Scan	Report Link

[Yuwen-ctw]

Hello @JohnsonMao

感謝解答有關圖片優化的是否會消耗流量的議題。
另外想確認一點是，在 next.config 中的 unoptimized 設為 true 之後，觀察目前 Vercel 提供的預覽，發現遊戲的圖片似乎依然不會正確顯示，因此想確認有關 Fixing the issue of external images not displaying. 這一部分的情況，是否無須另外設置也會一併解決了呢?

[JohnsonMao]

Hello @JohnsonMao

感謝解答有關圖片優化的是否會消耗流量的議題。 另外想確認一點是，在 next.config 中的 unoptimized 設為 true 之後，觀察目前 Vercel 提供的預覽，發現遊戲的圖片似乎依然不會正確顯示，因此想確認有關 Fixing the issue of external images not displaying. 這一部分的情況，是否無須另外設置也會一併解決了呢?

@Yuwen-ctw 因為目前 Vercel 提供的預覽在登入後導向了正式機的網站，所以才會看到沒有顯示，因為那是正式機的環境，我有自己建 repo 使用外部網站的圖片並部屬置 Vercel ，可以看到 Image 在取消優化後就變更成原有的 img 功能

unoptimized 設定成 false

unoptimized 設定成 ture

您可能需要透過一些偷吃步的方式來進入預覽頁面