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

这应该做到。

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

还可以考虑在加载图像时在适当的背景下进行此操作，以使您的用户获得更好的体验。

Answer 2

类似的东西（未经测试）：

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

我想如果可能的话，最好在服务器上的PHP中进行此更改，就像在浏览器中进行更改一样，它可能会加载所有缩略图，然后加载来自data-guid的所有图像，这将浪费数据。

Answer 3

您不需要替换图像，因为主题设置中将显示一个完整尺寸的原始图像。

或者您可以从WooCommerce>设置>产品>显示>产品图片更改大小

或者如果您正在使用自定义主题，则可以使用类似这样的内容。

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

将所有图像的src替换为另一个标签的值

3 个答案: