데이터가 도착하기 전에 ng-src가 이미지를 로드하지 않도록 하려면 어떻게 해야 합니까?
HTML:
<img ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}" alt="{{album.title}}" />
앱 실행 중 오류가 표시됩니다.
GET http://url.com/myApp/files/album_images/image/ 403 (Forbidden)
"http://url.com/myApp/files/album_images/image/"은 {{plugins}의 값입니다.filesPath.album_images.image}.
모든 데이터가 도착하기 전에 이미지를 로드하기 때문에 오류가 표시됩니다.
콘솔에서 이 오류를 방지하려면 어떻게 해야 합니까?
조건 패턴을 사용하려고 합니다.condition && true || false
따라서 수정ng-src
다음과 같은 속성:
<img ng-src="{{ album && plugins.filesPath.album_images.image + album.cover_image || '' }}" alt="{{album.title}}" />
이 변경으로 인해src
Atribute는 데이터가 도착할 때까지 비어 있습니다.
출처: 모델 데이터에 따라 img src를 조건부로 변경
2015년 3월 갱신
Angular 1.3.x를 사용하면 대부분의 커스텀 데이터 체크가 사용되지 않게 됩니다.이는 $interpolate에 "all OrNothing" 플래그가 포함되어 있기 때문입니다.이 플래그는 모든 바인딩이 정의되지 않은 것이 될 때까지 기다렸다가 식을 실제로 해결합니다.
그래서 이 경우에는ng-src
를 삽입하는 것 뿐입니다.src
둘 다 1회 속성album_images.image
그리고. album.cover_image
준비되었습니다.그래도 설정에 따라서는album.title
아직 준비가 되지 않았을 수 있습니다.그러니까 그걸 기다리고 싶다면isDataAvailable()
접근.
원답:
이왕이면ng-if
시험해 볼 수 있다
<img ng-if="isDataAvailable()" ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}" alt="{{album.title}}" />
$scope.isDataAvailable = function(){
// do your data checks here and
// return true;
}
이렇게 하면 이미지가 DOM에 추가되는 것은isDataAvailable
돌아온다true
그제서야ng-src
파일을 가져오려고 합니다.
그래도, 난 꽤 확신해403 (Forbidden)
는, 서버의 디렉토리/파일 액세스 제한과 관련이 있습니다.
ng-src는 값이 변경되기를 기다렸다가 요소에 src 값을 적용할 수 있습니다.옷 갈아입어봤어?
<img ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}"
로.
<img ng-src="{{plugins.filesPath.album_images.image + album.cover_image}}"
?
편집 - 수정 답변
ng-src는 {{}}의 정보가 변경될 때까지 대기하기 때문에 모든 측면이 준비되었는지 알 수 없습니다.생각할 수 있는 해결 방법은 두 가지가 있습니다.
a) 작성url_when_ready()
모든 문자열이 정의되어 있는 경우에만 값을 반환합니다.그럼 하세요
ng-src="{{url_when_ready([plugins.filesPath.album_images.image, album.cover_image])}}
b) $syslog.album.cover_image_full 모델을 만들고 $syslog.album.cover_image가 준비되면 이를 ng-src 값으로 사용합니다.
다른 모든 사용자와 마찬가지로 이미지가 페이지에 완전히 로드되기 전에 항상 로드 기호를 표시할 수 있습니다.여기 데모를 담은 바이올린이 있습니다.로드하기 전에 다른 이미지를 백그라운드에서 사용할 수 있습니다..css('background-image','url('+ url_link_var +')');
이것은 Feeld에 표시되어 있습니다.
언급URL : https://stackoverflow.com/questions/15433153/how-to-prevent-ng-src-to-load-image-before-data-arrives
'programing' 카테고리의 다른 글
이동 시 JSON Post Request 처리 (0) | 2023.02.11 |
---|---|
Oracle 테이블에서 중복된 값을 찾으려면 어떻게 해야 합니까? (0) | 2023.02.11 |
Angularjs: 명령어에 스코프 변수를 전달하려면 어떻게 해야 합니까? (0) | 2023.02.11 |
사용자 지정 css 클래스를 WooCommerce 체크아웃 필드에 추가합니다. (0) | 2023.02.11 |
wp_press를 사용한 워드프레스 페이지 리다이렉트 (0) | 2023.02.11 |