在 Wordpress 构建中使用 'Custom Post Type UI' 和 'Advanced Custom Fields' 损坏的图像

Question

我在这个 HTML 网站上有一个 'apparel' 部分，我现在正在将其转换为 Wordpess。

在我的设计中它看起来像这样（见下文） Apparel section

但在我的构建中它看起来像这样（见下文） The actual build in wordpres

我认为代码不是问题，但这里供参考：

<?php $loop = new WP_Query( array('post_type' => 'apparel', 'orderby' => 'post_id', 'order' => 'ASC')); ?>

   <?php while( $loop->have_posts() ) : $loop->the_post(); ?>

   <div class="col-lg-4 col-md-6 col-sm-6 mb-sm-30">
     <div class="blog-post">
       <div class="post-media">
         <img class="item-container" src="<?php the_field('apparel_img'); ?>"/>
       </div>
       <div class="product"><a><?php the_field('name_price');?></a></div>
     </div>
   </div>

<?php endwhile; ?>

当我使用 Chrome 检查器检查图像本身发生了什么时，它看起来像其他字符串被拉入，当我删除除图像根以外的所有内容时，图像不是坏了，还能用。

src="26, frontrunnerz black tee, black tee, , , image/png, http://localhost:8888/wp-content/uploads/2016/09/tee01.png, 300, 200, Array"

感谢您对此的帮助！

Answer 1

你的 ACF 字段 apparel_image 输出数组而不是 URL？要以这种方式输出它，您需要 URL!

或者，如果您想控制通过图像拉取的大小，您可以从 ACF 输出 ID 并放入您的模板中：

 $x = //post id;
 $s = //size string e.g. 'full';
 $image = get_field('apparel_image', $x);
        echo wp_get_attachment_image( $image, $s );

最后一点，下面的网站有他们的文档，如果你想做更复杂的事情，这些文档真的很方便，但我很确定如果你只想输出 src，你只需要更改 wp-admin 自定义字段设置中的输出！

https://www.advancedcustomfields.com/resources/image/

在 Wordpress 构建中使用 'Custom Post Type UI' 和 'Advanced Custom Fields' 损坏的图像

Broken images using 'Custom Post Type UI' and 'Advanced Custom Fields' in Wordpress build

wordpress

custom-post-type

advanced-custom-fields