При успешной загрузке необходимо проверить result.info.secure_url для ссылки на ресурс. В настоящее время в вашей предустановке вы используете Asyn c, что означает, что входящее преобразование выполняется в фоновом режиме (асинхронно), и, таким образом, вы получите результат pending. Asyn c предполагает, что вы используете URL-адрес уведомления в качестве веб-крючка, где вы получите ответ API загрузки, когда обработка будет завершена. В вашем случае я бы рекомендовал отключить Asyn c.
Кроме того, ваше входящее преобразование, настроенное в предустановке, недопустимо, и из-за этого вы получите error при загрузке. Пожалуйста, console.log это в вашем JSFiddle, чтобы увидеть это. По сути, это будет -
Автогравитация может использоваться только с кадрированием, заполнением, lfill, fill_pad или thumb
«автоматическая» гравитация (g_auto) подразумевает кадрирование (автоматический выбор наиболее интересной части изображения для фокусировки), поэтому вам необходимо использовать соответствующий режим кадрирования. «scale» сохраняет все данные изображения, поэтому обрезка не выполняется, поэтому g_auto не может работать с ним. Пожалуйста, обратитесь к следующему разделу документации для получения подробной информации о различных режимах обрезки - https://cloudinary.com/documentation/image_transformation_reference#crop_parameter - которые помогут вам решить, какой из них вы хотите использовать.
Наконец, вы также должны рассмотреть измените входящее преобразование так, чтобы оно изменяло размер только один раз, поскольку в настоящее время изменение его размера три раза в том же режиме кадрирования является излишним Например, вы можете использовать только c_scale,q_auto,w_687 или, если хотите, с «автоматической» гравитацией, вы можете попробовать c_fill,g_auto,q_auto,w_687.