Изображение созданное через URL.createobjecturl() перестает отображаться после перезапуска проекта

Пишу простой чат с использованием firebase. Хочу сделать функционал отправки своих картинок, загруженных с ПК.

Собственно реализую так:

<input 
            type="file" 
            className="chat_loadingImage"
            onChange={e => setUserImage(e.target.files[0])} />

const [userImage, setUserImage] = useState(undefined);
const [imageUrl, setImageUrl] = useState('');

    useEffect(() => {
    if (userImage) {
        const photoUrl = URL.createObjectURL(userImage)
        setImageUrl(photoUrl);
    }  
},[userImage])

Ну и отправляю сообщение:

    const sendMessage = async () => {
    await addDoc(messagesColection, {
        uid: user.uid,
        displayName: user.displayName,
        photoURL: user.photoURL,
        text: value,
        createdAt: serverTimestamp(),
        imageUrl
});

    setValue('');
}

Работает корректно, но после перезапуска приложения, изображения перестают отображаться. В консоли ошибка: "failed to load resource: net::err_file_not_found"

В документации указано: "Время жизни URL связано с document окна в котором он был создан". Не очень понимаю что это значит, если можно объясните.

И так же еще: "При каждом вызове createObjectURL(), создаётся новый URL объект, даже если он уже был ранее создан для того же самого объекта"

Значит ли это, что после каждого перезапуска проекта, ссылка как-бы теряется? Получается я не могу использовать данный способ добавления картинок в чат, нужно искать что-то другое?


Ответы (1 шт):

Автор решения: Danil Apsadikov

"Время жизни URL связано с document окна в котором он был создан" - это значит, что после перезагрузке страницы URL будет не валиден, собственно что и происходит

→ Ссылка