- 18, May 2024
- #1
Привет,
В приложении Laravel 8/tailwindcss 2/Alpinejs 2.8 у меня есть форма, когда отображается текущее изображение, и
новое изображение 1) можно выбрать с помощью предварительного просмотра и 2) сохранить с помощью кода Js с помощью axios
запрос 3) при успешной загрузке текущее изображение заменяется новым изображением предварительного просмотра
и у меня проблема: когда текущее изображение имеет большой размер, новое загружаемое изображение выглядит сломанным.
Я пытаюсь исправить это с помощью установки размера кода js для изображения в размере формы нового загруженного файла:
window.axios.post('/admin/settings/app_big_logo/images/upload', imageUploadData).then((response) => {
let img_app_big_logo = document.querySelector("#img_app_big_logo") // показываем загруженное изображение @endsection в форме
если (img_app_big_logo) {
// устанавливаем новое загруженное изображение
img_app_big_logo.src = response.data.settingsItemImgProps.image_url + ( '?dt=' + Math.floor(Date.now() / 1000) )
console.log('document.querySelector("#img_preview_app_big_logo").width::')
console.log(document.querySelector("#img_preview_app_big_logo").width)
// Я получил ширину/высоту нового загруженного изображения - в консоли я вижу небольшие значения изображения
// Но после назначения ширины/высоты изображения предварительного просмотра
img_app_big_logo.width= document.querySelector("#img_preview_app_big_logo").width //+ "px"
img_app_big_logo.height= document.querySelector("#img_preview_app_big_logo").height //+ "px"
// Я проверяю и вижу предыдущую ширину/высоту изображения PRIOR BIG - поэтому новое загруженное изображение выглядит сломанным
console.log('img_app_big_logo.width::')
console.log(img_app_big_logo.width)
console.log('img_app_big_logo.height::')
console.log(img_app_big_logo.height)
...
}
}).catch((ошибка) => { console.error(ошибка) }); Почему ошибка и как ее исправить?
Спасибо!
В приложении Laravel 8/tailwindcss 2/Alpinejs 2.8 у меня есть форма, когда отображается текущее изображение, и
новое изображение 1) можно выбрать с помощью предварительного просмотра и 2) сохранить с помощью кода Js с помощью axios
запрос 3) при успешной загрузке текущее изображение заменяется новым изображением предварительного просмотра
и у меня проблема: когда текущее изображение имеет большой размер, новое загружаемое изображение выглядит сломанным.
Я пытаюсь исправить это с помощью установки размера кода js для изображения в размере формы нового загруженного файла:
window.axios.post('/admin/settings/app_big_logo/images/upload', imageUploadData).then((response) => {
let img_app_big_logo = document.querySelector("#img_app_big_logo") // показываем загруженное изображение @endsection в форме
если (img_app_big_logo) {
// устанавливаем новое загруженное изображение
img_app_big_logo.src = response.data.settingsItemImgProps.image_url + ( '?dt=' + Math.floor(Date.now() / 1000) )
console.log('document.querySelector("#img_preview_app_big_logo").width::')
console.log(document.querySelector("#img_preview_app_big_logo").width)
// Я получил ширину/высоту нового загруженного изображения - в консоли я вижу небольшие значения изображения
// Но после назначения ширины/высоты изображения предварительного просмотра
img_app_big_logo.width= document.querySelector("#img_preview_app_big_logo").width //+ "px"
img_app_big_logo.height= document.querySelector("#img_preview_app_big_logo").height //+ "px"
// Я проверяю и вижу предыдущую ширину/высоту изображения PRIOR BIG - поэтому новое загруженное изображение выглядит сломанным
console.log('img_app_big_logo.width::')
console.log(img_app_big_logo.width)
console.log('img_app_big_logo.height::')
console.log(img_app_big_logo.height)
...
}
}).catch((ошибка) => { console.error(ошибка) }); Почему ошибка и как ее исправить?
Спасибо!
![[Мария Солодар] Школа интернет-маркетологов 2016](/assets/images/icons/forum5.png){kind=icon}
