Ng-lazyload-image: Ionic 2 - "ion-card" 지시문 내에서 작동하지 않음

에 만든 2017년 08월 22일 · 11코멘트 · 출처: tjoskar/ng-lazyload-image

안녕하세요,

Ionic 2에서 이 문제에 직면하고 있습니다.

기본적으로 img 태그가 ion-card 지시문 안에 있으면 이미지가 전혀 로드되지 않고 "defaultImage"만 표시됩니다. 이온 카드 외부에 이미지를 배치하면 정상적으로 작동합니다.

혹시 이것 좀 봐주실 수 있으면 알려주세요.

제자리에.ts
...
내보내기 클래스 PlacePage {

defaultImage: 문자열 = ' http://via.placeholder.com/350x150 ';
장소: 아무 = {
imgUrl: ' https://encrypted-tbn0.gstatic.com/images?q=tbn :AND9GcSSCP8YYuzKCXQLhQ7mkH5I_VpZ0v23BWrJ4QkxSSldl7sOV__xKA'
};

생성자() {
}

...
}

place.html에서:
<ion-card> <img [defaultImage]="defaultImage" [lazyLoad]="place.imgUrl" /> ..... </ion-card>

감사 해요

Wait for feedback

출처

walfro

모든 11 댓글

안녕하세요,

ion-cord 이 일부 보기 또는 자체 스크롤 컨테이너가 있는 모든 것 안에 있습니까? 당신의 견해를 좀 더 말씀해 주시겠습니까?

tjoskar 에 2017년 08월 22일

빠른 답변 감사합니다.

내 견해는 기본적으로 다음과 같습니다.

** "이온 함량"으로 래핑되었지만 어떤 이유로 여기에서 제대로 형식이 지정되지 않은 모든 것.

    <ion-card-content>
        <ion-card-title>
            <div>{{place.name}}</div>
        </ion-card-title>
        <div>
            Some content here ....
        </div>
    </ion-card-content>
</ion-card>

walfro 에 2017년 08월 22일

ion-content 이 문제일 수 있다고 생각합니다. ng-lazyload-image 사용 window 스크롤 이벤트에 대한 기본 당하지만 ion-content 우리가 스크롤 이벤트를 수신 할 수 있도록 자신의 스크롤 컨테이너를 사용 ion-content .

다음 템플릿을 사용해 볼 수 있습니까?

<ion-content #container>
  <ion-card>
    <img defaultImage]="defaultImage" [lazyLoad]="place.imgUrl" [scrollTarget]="container.scrollElement" />
    you content
  </ion-card>
</ion-content>

tjoskar 에 2017년 08월 23일

조사해 주셔서 감사합니다.

제공된 코드로 시도했지만 차이가 없었습니다. ion-content가 문제가 아니고 ion-card가 문제일 수 있다고 생각합니다. img 태그를 ion-card 외부로 가져오면 제대로 작동하기 때문입니다.

당신은 당신의 측면에서 그것을 재현하려고 했습니까? 그렇지 않은 경우를 대비하여 bitbucket에서 프로젝트를 공유할 수 있습니다.

감사 해요

walfro 에 2017년 08월 23일

흠, 알았어. 네, 당신의 프로젝트에 접근할 수 있다면 정말 좋을 것입니다 :) 가까운 프로젝트인 경우 bitbucket에서 tjoskar 를 사용자 이름으로 사용하고 있습니다.

tjoskar 에 2017년 08월 23일

문제를 해결하셨나요? 지금은 이 문제를 닫을 것이지만 자유롭게 다시 열 수 있습니다.

tjoskar 에 2017년 11월 05일

끝없는 스크롤과 관련된 비슷한 문제가 있습니다. 개발 중인 내 프로젝트는 http://veterinary.communityone.com 입니다 . 콘텐츠를 보려면 로그인을 만든 다음 로그인한 후 사이드바에서 소셜 피드를 클릭해야 합니다. 초기 페이지에는 이미지가 제대로 표시되지만 끝없는 스크롤이 시작되면 첫 번째 이미지는 스피너로 돌아가고 다시는 나타나지 않습니다.

capture