为什么使用自定义 useImmer-local-storage-state 挂钩来自 next/image 的图像不包含在本地存储中？

Question

主要问题：

我的本地存储不拍摄图像。

我在我的 react.js 项目中使用这个自定义钩子

import produce, { freeze } from "immer";
import { useCallback } from "react";
import useLocalStorageState from "use-local-storage-state";

export function useImmerLocalStorageState(key, options) {
  const [value, setValue] = useLocalStorageState(key, {
    ...options,
    defaultValue: freeze(options.defaultValue),
  });

  return [
    value,
    useCallback(
      (updater) => {
        if (typeof updater === "function") setValue(produce(updater));
        else setValue(freeze(updater));
      },
      [setValue]
    ),
  ];
}

我将此对象从控制台注销，以获取应保存图像的状态变量。

{$$typeof: Symbol(react.element), type: {…}, key: null, ref: null, props: {…}, …}

我想要那个在voteCheckmarkImage被传递给带有local-storage-state和useImmer钩子的函数之后，它将从本地存储中被拾取。

import { useRouter } from "next/router";
import styled from "styled-components";
import { useState } from "react";
import { StyledBackLink } from "@/components/styles/BackLink";
import VoteDetails from "@/components/VoteDetails";
import { voteIcons } from "@/Icons/dataIcons/";
import Image from "next/image";

function Votepage({ entryData, onHandleUpdateVoteEvent }) {
    const [voteCheckmarkImage, setVoteCheckmarkImage] = useState();
    const router = useRouter();
    const { id } = router.query;
    const currentEvent = entryData.find((entryToVote) => entryToVote.id === id);

    function handleVoteResult() {
        const resultVoteEvent = {
            ...currentEvent,
            voteResult: voteCheckmarkImage,
        };
        onHandleUpdateVoteEvent(resultVoteEvent);
    }

到...

import GlobalStyle from "@/styles";
import Head from "next/head";
import { v4 as uuidv4 } from "uuid";
import { useImmerLocalStorageState } from "@/lib/hooks";

export default function App({ Component, pageProps }) {
    const [entryData, setEntryData] = useImmerLocalStorageState("entryData", {
        defaultValue: [],
    });
    console.log(entryData);
    function handleEntryData(data) {
        const newData = { ...data, id: uuidv4() };

        setEntryData([newData, ...entryData]);
    }

    function handleUpdateVoteEvent(resultVoteEvent) {
        console.log(resultVoteEvent);
        setEntryData((draft) => {
            const votedEvent = draft.find(
                (voteEvent) => voteEvent.id === resultVoteEvent.id
            );
            votedEvent.voteResult = resultVoteEvent.voteResult;
        });
    }

我试过了 voteCheckmarkImage 改为使用 String 并且有效。 但两者都不是 使用 voteCheckmarkImag.props 解决了 src 和 alt 属性，破坏也没有使我达到我的目标。