我有一個 Angular 應用程式，它使用導航欄中的影像，如下所示：標志影像
我的問題是，每當我啟用生產模式時，網站都無法訪問影像。
這是一些背景關系：
- 該影像位于 wwwroot 檔案夾中：
\wwwroot\Images\flags（wwwroot 是 c# web 專案的默認檔案夾） - 這是我的
environment.prod.ts：
export const environment = {
production: true,
apiUrl: '/api'
};
- 這是我的
environment.ts:
export const environment = {
production: false,
apiUrl: 'https://localhost:5569/api'
};
- 這是我
lang.service.ts:從哪里得到影像：
getFlagUrl(fileName: string): string {
const flag = fileName.split('-')[0];
return `${environment.apiUrl.replace('api', '')}/Images/flags/${flag}.png`;
}
供參考
- 我使用帶有 c# 的后端服務器，并使用我的 API
URL:PORTNAME/api - 這是執行應用程式時的錯誤訊息：影像錯誤代碼
- 在生產模式下，我將我的應用程式移動到 IP 地址與 localhost 不同的本地服務器中。（不知道ip地址，應該是app自己動態收集的吧？）
- 如果我
localhost/api在生產模式下使用，我可以在本地服務器中看到標志，但不能從另一臺計算機上看到，我被困在這個 lol 上）
無論如何，我認為它與生產中的 url 有關？
uj5u.com熱心網友回復：
environment.apiUrl.replace('api', '')導致：
https://localhost:5569//Images/flags/en.png對于除錯模式和//Images/flags/en.png在生產中。
注意雙斜線；而對于除錯版本，瀏覽器修復了錯誤，在生產中，以雙斜杠開頭的 URL 是參考另一個主機的有效 URL，但使用相同的協議 (http/https)。請參閱此答案以獲取解釋。
為了使這項作業，您應該擺脫雙破折號，例如通過使用相對鏈接
return `${environment.apiUrl}/../Images/flags/${flag}.png`;
或在替換中包含斜杠：
return `${environment.apiUrl.replace('/api', '')}/Images/flags/${flag}.png`;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/510755.html