如何使用Vue.js在DB中显示使用地址的图像

Question

我正在尝试显示用Django REST保存的图像。保存时，数据库中指示的路径是"user_avatars/user1/avatar1.jpg"；。

当我使用API将对象从数据库上传到前端(Vue.js 3(时；http://127.0.0.1:8000/uploads/user_avatars/user1/avatar1.jpg"在这里你可以看到我使用"/上传/"；作为Django中的MEDIA_URL文件夹。然而，尝试显示来自该链接的图像没有任何作用：

<img src="http://127.0.0.1:8000/uploads/user_avatars/user1/avatar1.jpg">

我尝试了几种方法，找到了一个可行的选择：

<img src="../../../uploads/user_avatars/user1/avatar1.jpg" />

令人惊讶的是，如果我尝试使用Vue构建相同的路径，则不会加载任何内容：

<img :src="getAvatarURL" />

在那里；getAvatarURL"；函数只返回上面的字符串：

getAvatarURL(){
return "../../../uploads/user_avatars/user1/avatar1.jpg"

同时，唯一的工作选项，我手动输入文件的路径，显然会将其上传到前端服务器，然后才显示它，因为正如我在chrome devTools中注意到的那样，文件的路径更改为：

<img src="http://127.0.0.1:8080/img/avatar1.0cb5eef6.jpg" />

我完全输了。我曾尝试更改vue配置文件以更改存储图像的文件夹，但也无济于事。

请告诉我如何正确使用数据库中提供的链接？

Answer 1

这将归结为如何设置构建工具，以及如何存储图像。

也许不存储完整路径，而是存储文件名，并使路径类似于public/assets/images/+filename.ext

以下是我的设置方式。我使用Webpack编译：

webpack.config.js

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

然后在我的src文件中，我将图像保存在一个名为assets/images的文件夹中。其在编译时将它们复制到公共/资产/图像。

然后在我的Vue文件中，我可以导入文件

<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>

并将其返回到模板中，如下所示：

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