GET http://localhost: 4200/null 404 (не найдено) в angular2 с angular -cli

Ответ 1

Так что у меня было утомительное время, чтобы понять это, но я сделал.

Это случилось со мной сразу после обновления, но это не имело никакого отношения к этому.

Это определенно ссылка на переменную с нулевым значением и, скорее всего, атрибут src изображения. По крайней мере, это было для меня, и я использую значения с сервера повсюду в моем приложении, и img src были единственными причинами, и это имеет смысл.

У меня было что-то похожее на это:

<img [src]="myData?.imageUrl">

Я думал что то ? Безопасный оператор удостоверится, что я не получил нулевые ошибки, что обычно происходит, но, похоже, когда вы связываетесь с атрибутом src, браузер выдает ошибку, а не компилятор. Компилятор позволяет привязать к нему значение null из-за оператора safe, но поскольку src является ссылочным URL-адресом, браузер все еще ищет этот URL-адрес, и консоль выдает ошибку, поскольку не может найти relative/app/path/null URL-адрес relative/app/path/null

Два способа, которые я нашел, чтобы решить эту проблему:

1. Используйте ngIf: <img *ngIf="myData" [src]="myData.imageUrl"/> (все изображение и его атрибут src никогда даже не загружаются, если нет данных, что полностью <img *ngIf="myData" [src]="myData.imageUrl"/> проблему)
2. Используйте интерполяцию: <img src="{{ myData?.imageUrl }}"/> (ВНИМАНИЕ: в этом решении вам все еще нужен безопасный оператор, потому что компилятор выдаст ошибку иначе, как и ожидалось, но теперь, если значение равно нулю, затем src="" вместо нуля, который является допустимым HTML и не будет выдавать ошибку ссылки)

Надеюсь это поможет!

Ответ 2

В дополнение к запросу HauntedSmores: вы также можете использовать '' -fallback:

[src]="myObj.img || ''"

поскольку elvis-operator ? недоступен в .ts файлах, но только в шаблонах, вы также можете поместить его в typescript -getters.

Ответ 3

Происходит то, что некоторые браузеры (например, Chrome) выполняют некоторую функцию toString для атрибута src, что приводит к тому, что null становится 'null' вместо '', таким образом вызывая браузер для поиска //domain.com/null.

Некоторые могут вспомнить ng-src из AngularJS, который был создан для этого.

В любом случае, после множества вариантов я нашел следующие решения:

<img [attr.src]="myImageUrl"/>

Это работает и для async (который в основном вызывал эту проблему для меня):

<img [attr.src]="myImageUrl | async"/>

Это работает, потому что вместо установки src в 'null' или '', атрибут src не устанавливается вообще, пока используемая переменная/путь не установлена /не разрешена, поэтому не вызывает ошибку.

Ответ 4

В моем случае ошибка произошла из-за использования несуществующего свойства из моего шаблона (немой меня). Мой код был таким:

<img [src]='imageUrl'/>

Но базовый класс для шаблона имел свойство с именем:

imageURL: string;

Итак, я изменил imageUrl на imageUrl и работал как шарм!

Ответ 5

ИЛИ Когда их значение равно нулю/нет в нашем объекте, мы можем вместо этого дать статическое изображение

HTML

<img src={{row.webimage?row.webimage:localpath}}/>

Typescrpit

localpath = '../assets/img/default-user.png'

Точно так же мы можем использовать привязку для атрибута src.

Ответ 6

С троичным оператором:

[ngStyle]="{'background-image': myVariable? 'url(' + myVariable.image + ')' : 'none'}"