从node_modules绑定动态Vue映像源

Question

我正在创建一个Vue组件，它根据给定的图像名称或键(由API提供)从我的节点模块显示SVG图像。

如果我直接像~cryptocurrency-icons/svg/color/eur.svg一样放入源图像，资源就会加载。

但是，如果我尝试使用属性或挂载方法来计算它，并使用: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>

Answer 1

您缺少require属性。Vue Loader在编译单个文件组件中的<template>块时自动执行此操作。试试这个：

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

你可以阅读更多的here。

Answer 2

我已经通过使用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