Рендеринг нескольких изображений с блоб-ульрой с помощью react приводит к повреждению изображений

Я пытаюсь создать приложение, которое принимает на вход файл изображения, отправляет его на сервер и получает стилизованное изображение в виде URL blob. Проблема в том, что некоторые из полученных изображений иногда повреждаются. Здесь нет никакой закономерности, и некоторые из них повреждаются случайным образом. А иногда все работает нормально без поврежденных изображений. Вот соответствующие фрагменты кода. Я использую фреймворк django-rest для бэкенда.

var styled_images = []

function StyleTransferCarousel() {
    const [styledImages, setStyledImages] = useState([])
    const [styled, setStyled] = useState(false)

    // this function gets the image blob from server
    const getStyledImage = async (model) => {
            var formData = new FormData()
            ...
            try {
                const { data } = await axios.post('/style_transfer/stylev2/', formData, config)
                return data
            } catch (error) {...}
        }
    
    // this function gets the image blob untill the size of image list is equal to available models and re-renders
    async function getStyledImages() {
            var styledImageDict = {}
            for (let i = 0; i < models.length; i++) {
                var model_i = models[i]
                var data = getStyledImage(model_i)
                data.then(data => {
                    styledImageDict = {
                        image: "data:image/png;base64," + data.image,
                        model: models[i]
                    }
                    styled_images = styled_images.concat([styledImageDict])
                    if (styled_images.length !== models.length) {
                        setLoader(false)
                        setStyledImages(styled_images) //react hook
                    }
                })
            }

    }
    
// this is called once, if images are not styled
    useEffect(() => {
        if (models.length !== 0 && !styled) {
            //styled = true
            setStyled(true)
            getStyledImages()
            setLoader(true)
        }
    }, [models])
...
}

Изображения setStyledImages объекта отрисовываются. Некоторые примеры поврежденных изображений приведены ниже:

Вернуться на верх