项目。图像未在Jekyll中显示

项目。图像未在Jekyll中显示,jekyll,liquid,Jekyll,Liquid,我在/_works/上有一堆投资组合帖子,前面的内容是这样的: title: "Rock in Rio Lisbon 2018" date: July, 2018 image: "/assets/images/work/rock-in-rio-lisbon-2018.jpg" categories: - Intro slides: - title: "Rock in Rio Lisbon 2018 Headliner Show for Bruno Mars, Katy Perry, Mu

我在/_works/上有一堆投资组合帖子,前面的内容是这样的:

title: "Rock in Rio Lisbon 2018"
date: July, 2018
image: "/assets/images/work/rock-in-rio-lisbon-2018.jpg"
categories:
  - Intro
slides:
  - title: "Rock in Rio Lisbon 2018 Headliner Show for Bruno Mars, Katy Perry, Muse & The Killers"
    id: "O-rZ6IFnv9g"

override: true
{% assign works = site.works | reverse %}
{% for item in works limit:9 %}
<li class="{% cycle 'wide','','','','','','','','' %}">
<a href='{{ site.url }}{{ item.url }}'>


    {% if item.override %}
    {% for slide in item.slides limit:1 %}
        <img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="{{ site.url }}{{ slide.image }}" />
    {% endfor %}
    {% else %}
    {% for slide in item.slides limit:1 %}
        <img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="https://img.youtube.com/vi/{{ slide.id }}/sddefault.jpg" />
    {% endfor %}
    {% endif %}

    <div class='overlay'>
    <div class='thumb-info'>
        <h3>{{ item.title }}</h3>
        <p>{{ item.categories | sort |  join:" • " | escape }}</p>
        <p>{{ item.image }}</p>
    </div>
    </div>
</a>
</li>      
{% endfor %}
在主页上,我使用Slides.ID自动抓取YouTube视频的缩略图。如果前面的内容包括Override:true,它应该显示我定义的图像。以下是我所拥有的:

{% assign works = site.works | reverse %}
{% for item in works limit:9 %}
<li class="{% cycle 'wide','','','','','','','','' %}">
<a href='{{ site.url }}{{ item.url }}'>


    {% if item.override %}
    {% for item in item.slides limit:1 %}
        <img alt="A frame from a video of {{ item.title }}" loading="lazy" src="{{ site.url }}{{ item.image }}" />
    {% endfor %}
    {% else %}
    {% for item in item.slides limit:1 %}
        <img alt="A frame from a video of {{ item.title }}" loading="lazy" src="https://img.youtube.com/vi/{{ item.id }}/sddefault.jpg" />
    {% endfor %}
    {% endif %}

    <div class='overlay'>
    <div class='thumb-info'>
        <h3>{{ item.title }}</h3>
        <p>{{ item.categories | sort |  join:" • " | escape }}</p>
        <p>{{ item.image }}</p>
    </div>
    </div>
</a>
</li>      
{% endfor %}
{%assign works=site.works | reverse%}
{工程中项目的百分比限制:9%}
  • {%endfor%}

    当Jekyll编译时,
    {{item.image}
    不起作用……但是,如果我将它与
    {{item.title}}
    交换,它确实起作用。知道为什么会发生这种情况吗?

    您正在幻灯片中重用'item'变量,这会覆盖它。在幻灯片中循环时,将变量“item”重命名为“slide”,如下所示:

    title: "Rock in Rio Lisbon 2018"
    date: July, 2018
    image: "/assets/images/work/rock-in-rio-lisbon-2018.jpg"
    categories:
      - Intro
    slides:
      - title: "Rock in Rio Lisbon 2018 Headliner Show for Bruno Mars, Katy Perry, Muse & The Killers"
        id: "O-rZ6IFnv9g"
    
    override: true
    
    {% assign works = site.works | reverse %}
    {% for item in works limit:9 %}
    <li class="{% cycle 'wide','','','','','','','','' %}">
    <a href='{{ site.url }}{{ item.url }}'>
    
    
        {% if item.override %}
        {% for slide in item.slides limit:1 %}
            <img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="{{ site.url }}{{ slide.image }}" />
        {% endfor %}
        {% else %}
        {% for slide in item.slides limit:1 %}
            <img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="https://img.youtube.com/vi/{{ slide.id }}/sddefault.jpg" />
        {% endfor %}
        {% endif %}
    
        <div class='overlay'>
        <div class='thumb-info'>
            <h3>{{ item.title }}</h3>
            <p>{{ item.categories | sort |  join:" • " | escape }}</p>
            <p>{{ item.image }}</p>
        </div>
        </div>
    </a>
    </li>      
    {% endfor %}
    
    {%assign works=site.works | reverse%}
    {工程中项目的百分比限制:9%}
    
  • {%endfor%}