programing

데이터가 도착하기 전에 ng-src가 이미지를 로드하지 않도록 하려면 어떻게 해야 합니까?

newsource 2023. 2. 11. 09:28

데이터가 도착하기 전에 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}}" />

이 변경으로 인해srcAtribute는 데이터가 도착할 때까지 비어 있습니다.

출처: 모델 데이터에 따라 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