從 (Vue)JS 中的 API 取得並渲染影像?
P粉966335669
P粉966335669 2024-03-26 16:21:57
0
1
468

我有一個在 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 上是 Express 伺服器,其中包含:

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?.4514+$+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)

我需要兩件很簡單的事情:

  1. 要正確渲染的圖像
  2. 圖片名稱

P粉966335669
P粉966335669

全部回覆(1)
P粉786432579

這是一個非常簡單的修復。我實際上不需要發送文件本身,只需發送文件的連結(只需 app.send(imagePath) )。當客戶端對伺服器進行GET 呼叫時,它們會獲得一個url,該url 可以包含在img 標記中,如下所示:<img source="imagePath">

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板