在 (Vue)JS 中从 API 获取并渲染图像？

Question

我在 localhost:3000 有一个网站运行 VueJS，它可以调用 this.nextImage()。

methods:
// content //
async nextImage() {
    console.log("In nextImage from App.vue"); // keeping track of location

    try {
        const response = await axios.get('http://localhost:5050/images');
        
        console.log(response.data);

        [how to make an image?]
    } catch (error) {
        console.error(error);
    }
}
// content //
<template>
    <!-- stuff -->
    <div class="picture"><img :src="[what should go here?]" :alt="imageName"></div>
    <!-- more stuff -->
<template

在 localhost:5050 上是一个快速服务器，其中包括：

const path = require('path')
// content //
app.get('/images', (req, res) => {
    console.log("Express server: /images"); // tracking location

    let imageName = 'myImage'
    let imagePath = path.join(__dirname, '/images/' + imageName + '.jpeg')

    res.sendFile(imagePath)
})

记录 response.data 得到

����JFIF���
!.%+!&8&+/1555$;@;4?.4514+$+44444444444444444444444444444444444444444444444444���"����B   !1AQ2aq���"BR�����b�#3CSr���D��$%4����&1Q!Aa�2q�"��?�Z�UyEZL�>��ˀ��@�'G
��YU�U�$RlX�d<ǜ
(... abbreviated because I had too much code)

我需要两件非常简单的事情：

要正确渲染的图像
图片名称

Answer 1

这是一个非常简单的修复。我实际上并不需要发送文件本身，只需要将 link 发送到文件（只需 app.send(imagePath)）。当客户端对服务器进行 GET 调用时，他们会得到一个 url，它可以像这样包含在 img 标记中：<img source="imagePath">.

在 (Vue)JS 中从 API 获取并渲染图像？

Get and render image from API in (Vue)JS?

image

vue.js

express

http

axios