Заменить src всех изображений значением другого тега

Question

Я создал магазин woocommerce, и изображения моих продуктов выглядят размытыми.

Итак, я проверил блоки продукции и обнаружил следующее:

<img class="async-done" src="http://secureservercdn.net/160.153.137.40/w54.501.myftpupload.com/wp-content/uploads/2019/07/Boobs-Mockup-white-uai-258x258.png" width="258" height="258" alt="" data-uniqueid="73120-653948" data-guid="http://secureservercdn.net/160.153.137.40/w54.501.myftpupload.com/wp-content/uploads/2019/07/Boobs-Mockup-white.png" data-path="2019/07/Boobs-Mockup-white.png" data-width="4480" data-height="4480" data-singlew="6" data-singleh="4" data-crop="" data-fixed="" scale="0">

Тег data-guid содержит ссылку на изображение в полном разрешении, а тег src содержит созданный эскиз.

Как заменить значение тега src значением тега data-guid на всех блоках класса async-done, чтобы изображение получало высокое разрешение вместо сгенерированного эскиза с помощью JQuery?

Я пытался несколькими способами исправить проблему с миниатюрами в бэкэнде, но он продолжает показывать версию изображения размером 258x258: /

Answer 1

Что-то вроде этого (не проверено):

$('img.async-done').each(function(){
    $(this).attr('src', $(this).data('guid');
});

Я думаю, было бы лучше сделать это изменение в PHP на сервере, если это возможно, как если бы вы сделали это в браузере, он, вероятно, загрузит всеминиатюры, а затем все изображения из data-guid, которые будут тратить данные.

Answer 2

Вам не нужно заменять изображение, потому что в настройках вашей темы будет опция для отображения полноразмерного оригинального изображения.

или вы можете изменить размер в WooCommerce> Настройки> Продукты> Показать> Изображения продуктов

или, если вы используете собственную тему, вы можете использовать что-то вроде этого.

 wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full', false );

Answer 3

Это должно сделать это.

$.each($("img.async-done"), function(index, image){
    $(image).attr("src", $(image).data("guid"));
});

Также подумайте о том, чтобы сделать это с задним фоном, пока изображения загружаются, просто чтобы ваши пользователи получили лучший опыт.