node_modules에서 동적 Vue 이미지 src 바인딩

node_modules에서 동적 Vue 이미지 src 바인딩

주어진 이미지 이름 또는 키(API에 의해 주어진)를 기반으로 노드 모듈에서 SVG 이미지를 표시하는 Vue 컴포넌트를 만들고 있습니다.

만약 내가 직접 같은 소스 이미지를 넣었다.~cryptocurrency-icons/svg/color/eur.svg, 자원은 사람을 태운다.

하지만 제가 만약려고 한다면 계산합니다. 그것은 소품에 의해 탑재된 메서드 asigning 사용하다.:src="imageSource"그것은을 로딩하지 않는다.

저는 Vue에 처음 와서 왜 이런 일이 생기는지 모르겠어요.NPM 패키지 대신 공용 디렉토리에 다운로드된 이미지를 사용해야 합니까?

<template lang="html">
<img src="~cryptocurrency-icons/svg/color/eur.svg"  alt="icon" />
</template>

<script lang="js">
export default {
    name: 'crypto-icon',
    props: ['currency'],
    mounted() {
        this.imageSource = `~cryptocurrency-icons/svg/color/${this.currency}.svg`
    },
    data() {
        return {
            imageSource: ""
        }
    },
    methods: {
        getImageResource(){
            return `~cryptocurrency-icons/svg/color/${this.currency}.svg`
        }
    },
    computed: {

    }
}
</script>

<style lang="scss" scoped>
.crypto-icon {}
</style>

당신은 놓치고 있는require기여하다.그때 그것은 정리한 뷰 로더, 자동으로 이것을 한다.<template>단일 파일 요소들에 블록.이것으로 해 보십시오.

require(`~cryptocurrency-icons/svg/color/${this.currency}.svg`)

여기서 더 읽을 수 있습니다.

vue 플러그인(vue-cryptoicons 참조)을 사용하여 해결했습니다만, hatef의 사용은 적절합니다.require영상 자원, 아래 디렉터리에서를 사용합니다.node_modules전체 길을 찾으려고 하겠죠

~cryptocurrency-icons/svg/color in ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"a7e19d86-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Wallet.vue?vue&type=template&id=7f1455a9&scoped=true&lang=html&

To install it, you can run: npm install --save ~cryptocurrency-icons/svg/color

언급URL : https://stackoverflow.com/questions/63632157/bind-dynamic-vue-image-src-from-node-modules