NodeJS 通过axios获取图像如何在我的react项目上显示

bejyjqdl 于 2023-03-17 发布在 Node.js

关注(0)|答案(3)|浏览(97)

我有一个图像对象，正在通过axios和如何检索我的图像从这个对象，以及如何显示在我的React项目。我正在使用这个对象在“”标签，但它不工作...

import React, { useState } from "react";
import Axios from "axios";

function MyUploader() {
  const [image, setImage] = useState("");

  const getimage = () => {
    Axios.get("http://localhost:4000/getAllPosts").then((res) => {
      let result = (res && res.data && res.data[0].file) || [];
      setImage(result[0]);
    });
  };

  return (
    <div className="App">
      <img src={image} alt=""/>
      <button onClick={getImage}>getdata</button>
    </div>
  );
}

有我的数据对象，其中图像数组的availabel作为“文件”的名称，我从axios请求。我的问题是这是如何显示图像在我的项目...

{
category: "women"
colors: (3) ['yellow', 'gray', 'green']
createdAt: "2021-10-03T18:13:02.711Z"
description: "Lorem Ipsum is simply dummy text of"
discount: 10
file: Array(3)
0: {fieldname: 'file', originalname: 'WhatsApp Image 2021-09-08 at 11.54.30 AM.jpeg', encoding: '7bit', mimetype: 'image/jpeg', destination: './public/newPostData/', …}
1: {fieldname: 'file', originalname: 'WhatsApp Image 2021-09-07 at 10.50.05 PM.jpeg', encoding: '7bit', mimetype: 'image/jpeg', destination: './public/newPostData/', …}
2: {fieldname: 'file', originalname: 'WhatsApp Image 2021-09-07 at 12.25.49 PM.jpeg', encoding: '7bit', mimetype: 'image/jpeg', destination: './public/newPostData/', …}
length: 3
[[Prototype]]: Array(0)
id: 1
name: "Flare Dress"
new: true
pictures: (4) ['/assets/images/fashion/product/1.jpg', '/assets/images/fashion/product/21.jpg', '/assets/images/fashion/product/36.jpg', '/assets/images/fashion/product/12.jpg']
price: 12000
rating: 4
sale: true
salePrice: 20000
shortDetails: "Sed ut perspiciatis, unde omnis iste natu"
size: (3) ['M', 'L', 'XL']
stock: 16
tags: (2) ['nike', 'caprese']
updatedAt: "2021-10-03T18:13:02.711Z"
variants: (3) [{…}, {…}, {…}]
__v: 0
_id: "6159f2ae77433b2df4e1ee43"
}

node.js

来源：https://stackoverflow.com/questions/69400766/get-image-through-axios-how-to-display-on-my-react-project

3条答案

按热度按时间

axr492tv1#

将getImage方法更改为：

const getImage = () => {
  Axios.get("http://localhost:4000/getAllPosts", {
      responseType: "arraybuffer"
    })
    .then((res) => {
    const base64 = btoa(
      new Uint8Array(res.data).reduce(
        (data, byte) => data + String.fromCharCode(byte),
        ''
      )
    )
    setImage(base64)
  })
}

用法：

<img src={`data:;base64,${image}`} />

// or

<img src={`data:image/jpeg;charset=utf-8;base64,${image}`} />

赞(0）回复(0）举报 2023-03-17

rjee0c152#

把二进制数据和元数据混在一起并不是一个很好的做法，最好有一个端点，它可以返回二进制数据和正确的头文件，让浏览器像这样显示它：

<img src="https://yourapi.com/image/2"/>

赞(0）回复(0）举报 2023-03-17

hpcdzsge3#

在try块中请求之后添加以下内容：

if (res) {
                const base64 = btoa(
                    new Uint8Array(res.data).reduce(
                        (data, byte) => data + String.fromCharCode(byte),
                        ''
                    )
                )
                setImage(`data:;base64,${base64}`)
            }

赞(0）回复(0）举报 2023-03-17

我来回答

NodeJS 通过axios获取图像如何在我的react项目上显示

3条答案

相关问题

热门标签

最新问答