使用「自定義帖子類型UI」和「高級自定義字段」在Wordpress構建中損壞的圖像

Question

我在這個HTML網站上有一個'服飾'部分，我現在正在轉換爲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

你的apparel_image的ACF字段是否輸出數組而不是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/