Angular 6, сборка не может загружать изображения на хостинге Firebase
Я не могу загружать изображения из папки ресурсов после развертывания приложения angular на хостинге firebase. (сборка --prod) при запуске на localhost отображаются изображения. Все остальное загружается правильно. это мой пакет json cli: ~ 6.2.0-beta.2 инструменты firebase: 4.1.0
{
"name": "protocols",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"deploy": "ng build --prod && firebase deploy"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.2",
"@angular/cdk": "^6.4.5",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.5",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/pwa": "^0.8.0-beta.2",
"@angular/router": "^6.1.0",
"@angular/service-worker": "^6.1.0",
"angularfire2": "^5.0.0-rc.11",
"core-js": "^2.5.4",
"firebase": "^5.3.1",
"hammerjs": "^2.0.8",
"mat-progress-buttons": "^6.0.1",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.8.0-beta.0",
"@angular/cli": "~6.2.0-beta.2",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2"
}
}
попробовал в appComponent
<img src = "../assets/image.jpg">
<img src = "/assets/image.jpg">
<img src = "assets/image.jpg">
ничего из этой работы.
настройки хостинга на firebase.json
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]}
Есть какие-то трюки с огневой базой? переписывает? кто-нибудь может мне помочь!
Я из Бразилии, использую центральный сервер нас. Я не думаю, что это связано с текущей проблемой RD. Я воспроизвел тот же проект (только хостинг) с angular cli 6.0.3 и firebase-tools 4.0.3, и он сработал.
Ответы 4
Теперь изображения загружаются из ресурсов в angular 6.1.3 после развертывания firebase! Наконец-то нашел решение, оно работает для меня. Проблема заключается в изменении tsconfig.json:
"outDir": "./dist/out-tsc",
к:
"outDir": "./dist",
У меня была такая же проблема со статическими активами после развертывания на хостинге Firebase, хотя они нормально работали при обслуживании с localhost. Пришлось менять с <img src = "/src/assets/img/pricing_comparison.PNG"> - <img src = "/assets/img/pricing_comparison.PNG">.
(p.s. Я попытался изменить свой файл tsconfig.json в соответствии с принятым ответом, но это не изменило и не устранило мою ошибку)
Не знаю, как это работает, но мне это помогло. Спасибо, сэр Кэт
У меня тоже была такая же проблема. Вот решение, которое я пробовал
Открытое изменение tsconfig.json:
"outDir": "./dist/out-tsc",к:
"outDir": "./dist"Откройте angular.json. убедитесь, что конфигурации активов такие, как показано ниже
"assets": [
"src/favicon.ico",
"src/assets"
],
- Изменение тега img
<br>src = "/src/assets/img/pricing_comparison.PNG"в<br>src = "/assets/img/pricing_comparison.PNG".
Я пробовал это решение и многие другие, но ни одно не помогло. Единственное решение, которое сработало, - это переместить файл ресурсов в общедоступный файл на сервере, это не красиво и элегантно, но было единственным решением, которое сработало! Сразу скажу, что это началось после того, как я начал использовать laizy load, до этого все было нормально.
Если вы работаете в localhost
juste используйте URL как
#login {
background-image: url('/assets/app-assets/img/gallery/login-bg.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
в вашем компоненте CSS или html это работает для меня.
просто измените URL-адрес изображения с /src/assets/your_image.png на /assets/your_image.png
вот моя угловая версия
Angular CLI: 8.2.2
Node: 12.8.0
OS: darwin x64
Angular: 8.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.802.2
@angular-devkit/build-angular 0.802.2
@angular-devkit/build-optimizer 0.802.2
@angular-devkit/build-webpack 0.802.2
@angular-devkit/core 8.2.2
@angular-devkit/schematics 8.2.2
@angular/cli 8.2.2
@ngtools/webpack 8.2.2
@schematics/angular 8.2.2
@schematics/update 0.802.2
rxjs 6.4.0
typescript 3.5.3
webpack 4.38.0
Вы из ОАЭ или Индии? Прямо сейчас существует постоянная проблема с базой данных в реальном времени. Ссылка на инцидент