How to display image using address in DB using Vue.js? - html

Question

I'm trying to display an image saved with Django REST. When saving, the path that is indicated in the database is "user_avatars/user1/avatar1.jpg".
When I upload an object from the database to the frontend (Vue.js 3) using the API, the address is displayed as "http://127.0.0.1:8000/uploads/user_avatars/user1/avatar1.jpg"
Here you can see that I use "/uploads/" as the MEDIA_URL folder in Django. However, trying to display an image from this link does nothing:
<img src="http://127.0.0.1:8000/uploads/user_avatars/user1/avatar1.jpg">
I tried to do it in several ways, and found one working option:
<img src="../../../uploads/user_avatars/user1/avatar1.jpg" />
Surprisingly, if I try to construct the same path using Vue, nothing loads:
<img :src="getAvatarURL" />
There the "getAvatarURL" function simply returns the string above:
getAvatarURL(){
return "../../../uploads/user_avatars/user1/avatar1.jpg"
At the same time, the only working option, where I manually entered the path to the file, apparently uploads it to the front-end server and only then displays it, because as I noticed in chrome devTools, the path to the file changes to this:
<img src="http://127.0.0.1:8080/img/avatar1.0cb5eef6.jpg" />
I absolutely lost in this. I've tried to change vue config file to change folder where to store images, but it also didn't help.
Please, tell me how to use the link provided from the database correctly?

Answer 1

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>