mysql - 如何在 Vue.js 中使用 mysql 路径显示来自本地服务器的图像

Question

今天我成功创建了node.js API，可以存储图片（链接到服务器上的文件）。从 Vue 应用程序发送表单数据后，我可以看到在我的后端创建了上传文件夹，并且图片也存储在那里。在我的 mysql 数据库中，我有 filePath，在里面我可以看到服务器上该图片的完整路径。问题是，我无法在前端显示这张图片。我尝试了一切，我用谷歌搜索了一切，但我不知道我做错了什么。

我要显示图像的前端代码：

<template>
  <v-card class="mx-auto justify-center" flat >
    <v-card-title class="orange lighten-2 white--text"><b>{{ bozpCases.caseName }}</b>
    </v-card-title>
    <v-divider></v-divider>
    <v-card-text class="text-center" >
         <p>Stavba: <b>{{bozpCases.constructionSite }}</b></p>
         <p>Vytvoril koordinátor BOZP: <b>{{bozpCases.createdBy }}</b></p>
         <p>Dátum zistenia: <b>{{bozpCases.dateOfDiscovery }}</b></p>
         <p>Miesto zistenia: <b>{{bozpCases.placeOfDiscovery }}</b></p>
         <p>Zodpovedný za vyriešenie zistenia: <b>{{bozpCases.responsible }}</b></p>
         <p>Návrh na udelenie sankcie: <b>{{bozpCases.sanction }}</b></p>
         <p>Pre spoločnosť: <b>{{bozpCases.forCompany }}</b></p>
         <p>Popis: <b>{{bozpCases.text }}</b></p>
    </v-card-text>
    <v-img src="require(bozpCases.imagePath)" aspect-ratio="1" max-height="300" max-width="500" ></v-img>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="orange lighten-2 white--text" @click="$emit('close-card')">
        Zavrieť
        <v-icon>mdi-close</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  props: ["bozpCases"]
};


</script>

这是我在数据库中存储的逻辑。

async post (req, res) {
        try {
            fs.writeFileSync(
                __basedir + "/tmp/" + req.file.originalname,
                req.file.path
            )
            const newCase = await Case.create({
                caseName: req.body.caseName,
                constructionSite: req.body.constructionSite,
                createdBy: req.body.createdBy,
                dateOfDiscovery: req.body.dateOfDiscovery,
                dateOfRemoval: req.body.dateOfRemoval,
                responsible: req.body.responsible,
                howManyDiscoveries: req.body.howManyDiscoveries,
                placeOfDiscovery: req.body.placeOfDiscovery,
                text: req.body.text,
                sanction: req.body.sanction,
                forCompany: req.body.forCompany,
                imagePath: req.file.path
            })
            .then(
                transporter.sendMail({
                    to: '[e-mail]',
                    from: '[e-mail]',
                    subject: 'Vytvorenie nového zistenia: ' + req.body.caseName,
                    html: `
                    Dobrý deň, <br>
                    <br>
                    cez portál virtsql.skolboz.sk bolo práve vytvorené nové zistenie používateľom: ${req.body.createdBy}.<br>
                    <br>
                    <b>Názov zistenia:</b> ${req.body.caseName}<br>
                    <b>Stavba:</b> ${req.body.constructionSite}<br>
                    <b>Vytvoril koordinátor BOZP:</b> ${req.body.createdBy}<br>
                    <b>Dátum zistenia:</b> ${req.body.dateOfDiscovery}<br>
                    <b>Zodpovedný z vyriešenie zistenia:</b> ${req.body.responsible}<br>
                    <b>Celkový počet zistení v dni:</b> ${req.body.howManyDiscoveries}<br>
                    <b>Miesto zistenia:</b> ${req.body.placeOfDiscovery}<br>
                    <b>Návrh na udelenie sankcie:</b> ${req.body.sanction}<br>
                    <b>Pre spoločnosť:</b> ${req.body.forCompany}<br>
                    <b>Zistený nedostatok:</b> ${req.body.text}<br>
                    `
                })).catch((err) => {
                    console.log(err)
                })
            res.send(newCase)
        } catch (err) {
            console.log(err)
            res.status(500).send({
                error: "Pri snahe pridať prípad nastala chyba. Skúste to neskôr prosím."
            })
        }
    }

这是存储在数据库中的照片的路径：/Users/zacik/Desktop/BOZP_LOCAL/bozp-api/uploads/problem.png

当我将此链接复制到我的网络浏览器时，我可以看到图片。

为什么我不能在vue中使用它？

谢谢！

标签： mysqlimagevue.jsexpresssequelize.js