[Vuejs]-Vue3 Component doesn't render in production when using v-bind:href require()

by

1👍

✅

The expression inside v-bind is executed at runtime, webpack aliases at compile time.

Move require() from html template to data() and it should work in production.

Simple example:

<template>
<img :src="getImg" />
</template>

<script>
export default {
    name: 'Example',
    data() {
        return {
            file: 'image',
        }
    },
    methods: {
        getImg() {
            return require(`@/assets/images/${this.file}.png`)
        },
    },
}
</script>

Leave a comment