尝试显示 IMG，并将 src 设置为来自 Mongoose 的二进制/缓冲区图像数据

Question

尝试使用 React/JSX 显示 IMG，并将缓冲/二进制数据保存到我的 MongoDB/Mongoose 数据库中。

我使用如下所示的 IMG 元素遍历数据数组：

<img src={`data:${item.img.contentType};base64,${item.img.data.data.toString("base64")}`} alt="" />

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

const FilesUpload = () => {
  const [allPics, setAllPics] = useState([]);

  useEffect(() => {
    const getPics = async () => {
      let res = await axios.get("http://localhost:8080/");
      setAllPics(res.data);
    };
    // query the server for all of the picture objects
    getPics();
  }, []);

  const [state, setState] = useState({});

  const handleChange = (e) => {
    e.preventDefault();
    setState(e.target.value);
    console.log(state);
  };

  return (
    <>
      <h1>upload an image</h1>
      <hr />
      <div>
        <form
          action="http://localhost:8080/"
          method="POST"
          encType="multipart/form-data"
        >
          <div>
            <label>Image Title</label>
            <input type="text" id="name" placeholder="Name" name="name" onChange={handleChange} value={state.name}/>
          </div>
          <div>
            <label htmlFor="desc">Image Description</label>
            <textarea id="desc" name="desc" rows="2" placeholder="Description"
              onChange={handleChange} value={state.desc}/>
          </div>
          <div>
            <label htmlFor="image">Upload Image</label>
            <input type="file" id="image" name="image" required />
          </div>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>

      {allPics.length > 0 ? (
        <div>
          {allPics.map((item, index) => (
            <div key={index}>
              <div>
                <img src={`data:${item.img.contentType};base64,${item.img.data.data.toString("base64")}`} alt="" />
              </div>
            </div>
          ))}
        </div>
      ) : (
        <>
          <hr />
          <br />
          <h1>uploaded files</h1>
          <h5>Loading..</h5>
        </>
      )}
    </>
  );
};

export default FilesUpload;

但我总是得到 ERR_INVALID_URL：

从网上类似的帖子中，我读到我需要获取那些以逗号分隔的值并删除逗号，这将为我提供正确的数据。很难弄清楚。任何帮助都会很棒。谢谢

Answer 1

在我的猫鼬模型中保存这样的图像后，我遇到了同样的问题，经过多次研究我解决了这个问题，希望这对你也有用

const base64String = btoa(String.fromCharCode(...new Uint8Array(item.img.data.data)));

在img标签中放这个-:

src={`data:image/${item?.img?.contentType};base64,${base64String}`}