You're encountering a common issue when storing image URLs like this:

{
  src: "blob:http://localhost:5173/948366be-7f9d-4675-9936-4e9e784a5e28";
}

These are blob: URLs, and they are temporary. They are only valid during the same browser session. Once you reload or come back later, they are gone — which is why your images no longer appear.

✅ Why this happens:

• A blob: URL is generated by the browser at runtime to represent a File or Blob object.
• It’s not a permanent URL — it doesn't survive page reloads.
• When saved in localStorage, it's useless later, because the blob it points to no longer exists.

✅ Solutions:

✅ Option 1: Save Base64 String Instead

Convert the image to a Base64 string and store it in localStorage.

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result); // this will be a base64 string
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

Then you can store:

{ src: "data:image/png;base64,...", seed: 2306127 }

Later, you can use the Base64 string directly in the src attribute of an <img> tag.

✅ Option 2: Use IndexedDB (more advanced)

If you're dealing with large images or many files, localStorage may not be ideal. Instead, use IndexedDB, which can store File/Blob objects persistently.

But this option is a bit complex and not needed unless you're building a full offline image app.

✅ Final Suggestion for You:

Since you’re using blob: URLs and saving to localStorage, switch to this flow:

1. Convert the uploaded image to Base64 using FileReader.
2. Save the Base64 string in localStorage instead of the blob URL.
3. Use the Base64 string as src in your <img> when displaying later.

Would you like a full working example in React?