머리말
매일 개발 작업에는 페이지에 일부 사진을 표시해야 할 요구 사항이 많이 있습니다. 때로는 이미지의 주소 경로가 클라이언트의 스크립트에 의해 설정됩니다 (데이터베이스에서 검색 될 수 있음).
이것은 Angularjs의 시대입니다. AngularJS를 사용하여 페이지에 이미지를 표시하려면 간단히 사용합니다. <img src=”path of image”>.
프레젠테이션 만 고려하면 괜찮다는 것은 의심의 여지가 없지만 브라우저의 콘솔에 404 (찾을 수없는) 오류가 표시됩니다.
이 문제를 해결하려면 ng-Src 사용해야합니다. ng-Src 사용하기 전에이 오류가 어떻게 발생하는지 재현하고 싶습니다.
샘플 코드는 다음과 같습니다.
샘플 소스 코드
script.js
var testApp = angular .Module ( "testModule", []) .controller ( "testController", function ($ scope) {var 동물 = {name : "cat", "white", picture : "/images/cat.jpg",}; $ scope.animal = 동물;});index.html
<html ng-app = "test-module"> <head> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js"> </script> </head> <body> <g-controller = "testcontroller"> 이름 : {{동물성 .name}} <br /> color : {{animal.color}} <br /> <img src = "{{emital.picture}}" /> < /div> < /body> < /html> 위의 예에서는 Name , Color 및 Picture , 값이 할당 된 세 가지 속성이있는 animal 클래스가 있습니다. 모델 바인더를 사용하여 페이지에 이러한 속성을 사용했습니다. 이미지의 경우 <img> html 태그를 사용했습니다.
그런 다음이 예제를 실행하면 효과는 다음과 같습니다.
그런 다음 브라우저의 콘솔을 열면이 오류가 표시됩니다.
로드 할 수 없음 리소스 : 서버 응답 상태는 404입니다 (찾을 수 없음).
따라서 문제는 왜이 오류가 발생합니까? 어떻게 해결해야합니까?
원인 - DOM이 구문 분석되면 서버에서 사진을 얻으려고합니다. 현재 src 속성의 AngularJS 바인딩 표현식 {{ model }} 은 아직 실행되지 않았으므로 404의 오류가 발생하지 않았습니다.
솔루션- 솔루션 버전은 다음과 같습니다. 그림의 src 속성 대신 ng-Src 사용하십시오. 이 지침을 사용한 후에는 각도 가이 바인딩 표현식을 실행 한 후에 만 요청이 발행됩니다.
NG-SRC를 사용하는 예는 다음과 같습니다.
<html ng-app = "test-module"> <head> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js"> </script> </head> <body> <g-controller = "testcontroller"> 이름 : {{동물성 .name}} <br /> color : {{animal.color}} <br /> <img ng-src = "{{emital.picture}}" /> < /div> < /body> < /html> 이제 브라우저의 콘솔을 다시 열었으므로 다음과 같이 표시되지 않습니다. 404 찾을 수 없습니다. ng-Src 사용되기 때문입니다.
정의
ng-Src- 이 지시문은 <img /> 요소의 src 기본 속성을 무시합니다.
요약
위는이 기사의 전체 내용입니다. 나는 당신이 그것을 좋아하기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.