[Vuejs]-How to display image using address in DB using Vue.js?

by

0👍

This going to boil down to how you have your build tools set up, and how you are storing your images.

Maybe not store the full path, but a file name, and have the path be something like public/assets/images/ + filename.ext

Here is how I have my setup. I use Webpack to compile:

webpack.config.js

module.exports = {
    entry: { ... },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|bmp)$/i,
                type: 'asset/resource'
                generator: {
                    filename: './assets/images/[name][ext]
                }
            }
        ]
    }
}

Then inside my src file i keep my images in a folder called assets/images. which when compile copies them to public/assets/images.

Then inside my Vue files i can import the file

<script lang="ts">
    import { defineComponent, ref } from "vue"

    import avatar from '@/assets/images/avatar1.png'

    export default defineComponent({
        name: 'sidebar-user',
        setup() {
            return { avatar }
        }
    })
</script>

and return it to template where it looks like this:

<template>
    <img :src="avatar" alt="avatar" />
</template>

Leave a comment