Предисловие
В ежедневной разработке есть много требований для отображения некоторых изображений на странице. Иногда адрес адреса изображения устанавливается сценарием клиента (он может быть извлечен из базы данных).
Это эпоха Angularjs. Когда мы хотим использовать Angularjs для отображения изображений на страницах, мы просто будем использовать: <img src=”path of image”>.
Если мы только рассмотрим презентацию, нет никаких сомнений в том, что она в порядке, но на консоли браузера будет отображаться ошибка 404 (не найдена).
Чтобы решить эту проблему, нам нужно использовать ng-Src . Перед использованием ng-Src я хочу воспроизвести, как возникает эта ошибка.
Пример кода заключается в следующем:
Пример исходного кода
Script.js
var testApp = angular .module ("testmodule", []) .controller ("testController", function ($ accope) {var Animal = {name: "cat", цвет: "белый", картина: "/images/cat.jpg",}; $ scope.Animal = Animal;});Index.html
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js"> </script> </head> <body> <div ng-controler = "testcontroller"> name: name: name: "> name:"> name: name: "> name:"> name: name: "> name:"> name: "> name:"> name: "> name:"> name: "> name:"> name: "> name:"> name: "> name:" {{Animal.name}} <br /> color: {{animal.color}} <br /> <img src = "{{animal.picture}}" /> < /div> < /body> < /html> В приведенном выше примере есть класс animal , который имеет три свойства: Name , Color и Picture , и ему было присвоено значения. Используя переплет модели, я использовал эти свойства на странице. Для изображений я использовал тег <img> HTML.
Затем запустите этот пример, эффект заключается в следующем:
Затем откройте консоль браузера, и вы увидите эту ошибку.
Невозможно загрузить ресурс: состояние ответа сервера составляет 404 (не найдено).
Итак, вопрос в том, почему эта ошибка происходит? Как это должно быть решено?
Причина - когда DOM анализируется, он попытается получить изображение с сервера. В настоящее время выражение связывания AngularJS {{ model }} на атрибуте src еще не была выполнена, поэтому произошла ошибка 404.
Решение- версия решения: используйте ng-Src вместо атрибута src на картинке. После использования этой директивы запрос будет выдан только после того, как Angular выполняет это привязанное выражение.
Примеры использования NG-SRC заключаются в следующем:
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js"> </script> </head> <body> <div ng-controler = "testcontroller"> name: name: name: "> name:"> name: name: "> name:"> name: name: "> name:"> name: "> name:"> name: "> name:"> name: "> name:"> name: "> name:"> name: "> name:" {{Animal.name}} <br /> color: {{animal.color}} <br /> <img ng-src = "{{animal.picture}}" /> < /div> < /body> < /html> Теперь, когда вы снова открываете консоль браузера, она не появится: 404 не найден, это потому, что ng-Src используется.
определение
ng-Src- -Эта директива переопределяет нативные атрибуты src элемента <img /> .
Суммировать
Вышеуказанное - все содержание этой статьи. Надеюсь, вам понравится. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для общения.