Vuejs는 url에서 이미지를 캐슁하여 다시 fetching하지 마십시오.

Vuejs는 url에서 이미지를 캐슁하여 다시 fetching하지 마십시오.

나는 간단한 갤러리 + 슬라이드쇼 앱을 만들고 있어.
갤러리 구성 요소에서 모든 URL을 가지고 있으며,GalleryItem구성 요소

<gallery-item v-for="i in images" :item="i" :key="i.uid"/>

GalleryItem그런 다음 사용한다.

<img :src="item.url"/>

이미지를 표시하기 위해.
사용자가 클릭할 경우GalleryItem라이트박스/하이브리드하우 구성요소로 강조 표시된다.

<lightbox :item="highlightedItem"/>

다시 사용하다.

<img :src="item.url"/>

나는 순진하게도 브라우저가 그 요청을 캐시하고 정확히 같은 URL을 다시 로드하지 않을 것이라고 예상했지만, 정확히 그렇게 되고 있다.

이것을 피하고 한 번 로드했을 때 이미지를 캐시할 수 있는 우아한 방법은 없을까?

서비스 작업자와 함께 이미지 캐싱을 구현할 수 있다.

사용할 수 있는 서비스 작업자 라이브러리의 예는 Workbox 입니다.Workbox를 사용하면 캐시할 URL과 여러 가지 캐싱 전략을 정의할 수 있다.다음 코드 예제와 유사하게 RegExp을 사용 사례에 적합한 코드(예: 이미지 확장 사용)로 교체하십시오.

동일한 URL에서 항상 동일한 이미지를 가리키듯이 이미지가 변경되지 않으면 캐시퍼스트 전략을 사용하는 것이 좋으며, 이미지가 이미 캐시에 있는 경우에는 서버에 요청을 보낼 필요가 없기 때문이다.

workbox.routing.registerRoute(
  new RegExp('/styles/'),
  new workbox.strategies.CacheFirst()
);

참조URL: https://stackoverflow.com/questions/56146198/vuejs-cache-images-from-url-avoid-re-fetching