Nuxt.js로 오프라인으로 작업할 때 TwicPics 이미지 표시

TwicPics는 이미지 변환 및 최적화 SaaS입니다. 클라우드에서 작동하며 프런트 엔드 개발자는 JavaScript 라이브러리를 통해 API와 상호 작용합니다. 그러나 로컬에서 작업할 때 인터넷에 연결하기를 원하지 않거나 연결하지 못할 수 있습니다.

이런 일이 나에게 일어났기 때문에 필요할 때 로컬 이미지로 대체할 수 있도록 TwicPics 주변에 래퍼 구성 요소를 작성했습니다. 분명히 이것은 이미지 최적화 또는 변환을 건너뛰는 것을 의미합니다. 그러나 끄고 켤 수 있는 빠른 토글을 제공하므로 로컬에서 작업할 때 유용할 수 있습니다.

로컬 이미지에 대한 켜기/끄기 스위치 추가

먼저 TwicPics를 쉽게 전환할 수 있도록 Nuxt 구성에 구성 항목을 추가합니다.

// nuxt.config.js

export default {
    publicRuntimeConfig: {
        enableOptimization: process.env.NODE_ENV !== 'development'
    }
}

이 예에서는 개발 모드에 있을 때 기본적으로 로컬 이미지로 앱을 구성합니다. 그러나 원하는 조건을 선택하거나 특정 환경 변수를 사용할 수 있습니다.

이미지를 컴포넌트로 감싸기

이제 구성 토글이 있으므로 이를 사용하는 구성 요소를 만들어 보겠습니다. 간단한 접근 방식을 사용하겠습니다. enableOptimization가 false일 때 이미지를 표시합니다. 그렇지 않으면 TwicPics로 처리합니다.

<!-- components/BaseImage.vue -->
<template>
    <img 
        v-if="$config.enableOptimization"
        :src="src"
    />
    <img
        v-else
        :data-twic-src="`image:${src}`"
    />
</template>

<script>
export default {
    props: {
        src: { type: String, required: true }
        // In reality, you'd probably have more props to handle transformations, etc.
    }
}
</script>

그리고 그게 다야!
BaseImage 구성 요소는 enableOptimization가 false일 때마다 로컬 이미지를 로드합니다. 프로덕션에서 TwicPics를 계속 사용하기 위해 코드를 변경할 필요가 없습니다.

분명히 이것은 단순화된 예입니다. 실제로는 base <TwicImage/> 대신 <img> 구성 요소를 래핑할 것입니다. 그러나 전반적인 논리는 동일합니다. the documentation에서 @twicpics/components에 대해 자세히 알아보세요.


더 나아가려면:

Nuxt.js docs

TwicPics docs

아니면 댓글로 질문을 해주세요!

저는 Nuxt.js 및 서버리스로 작업하는 웹 개발자입니다. 나는 내가 배운 것에 대해 쓰고 있습니다. 자세한 내용은 Twitter에서 팔로우하세요.

건배,