How to safely use the `prevArchive` tag to display images in a template and prevent empty image links?

In AnQiCMS template development, achieving smooth user experience and elegant page display is our core goal.Among them, the 'Previous/Next' navigation on the article detail page is an important link to enhance user browsing depth and site stickiness. ByprevArchiveandnextArchiveSuch a template tag can easily guide users to related content.However, in this process, how to safely and beautifully display the pictures related to the articles, and avoid annoying broken image links, has become a detail worthy of in-depth discussion.

Today, let's talk about how to handle image display skillfully when using tags in the AnQiCMS templateprevArchiveand say goodbye to the trouble of empty image links.

UnderstandingprevArchiveTag and image attributes

First, let's reviewprevArchiveTag function. According to the AnQiCMS template tag convention,prevArchiveUsed to retrieve the data of the previous document of the current article. When we call it in the template, it is usually written like this:

{% prevArchive prev %}
  {# 在这里使用prev对象来展示上一篇文章的信息 #}
{% endprevArchive %}

here,prevIt represents the object of the previous article. It includes such asId(Document ID),Title(Title),Link(Link) and core information. For images,prevobjects usually provideThumband (document cover thumbnail) andLogo(Document cover first image) These fields. Ideally, we can use them directly to display images: 

<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />

However, the problem often lies here: not all articles upload thumbnails or cover images. Ifprev.Thumborprev.Logois empty, then<img>label'ssrcthe attribute will becomesrc=""This will display as a broken icon in the browser, severely affecting the visual professionalism and user experience of the website.

Potential issues with empty image links

Onesrc=""The image link, not just visual dissonance. From a technical perspective, it may lead to:

  1. User experience is受损:A broken icon makes the page look incomplete, even causing users to mistakenly believe that content is missing or there is a problem with the website.
  2. Additional HTTP requests:Some browsers may try to interpret emptysrcParsed into the URL of the current page, thus initiating unnecessary HTTP requests, slightly increasing the server burden.
  3. Not conducive to SEO:Although the impact is small, a page full of broken images may be regarded by search engines as having poor user experience, indirectly affecting the ranking.

Therefore, we need a robust strategy to deal with this situation.

Strategy and practice for safe display of images.

To prevent the appearance of empty image links, we can introduce some logical judgments and backup mechanisms in the template. This mainly includes the following steps:

The first step is to check if the previous document exists

Before trying to display any information, we must first confirmprevArchiveDid you successfully get the previous document? If there is no previous document, there is no need to continue processing the image.

{% prevArchive prev %}
  {% if prev %}
    {# 存在上一篇文档，继续处理 #}
  {% else %}
    <span class="no-prev-article">没有上一篇了</span>
  {% endif %}
{% endprevArchive %}

Step two: Determine if the previous document has usable images

After confirmingprevAfter the object exists, the next step is to determine whether it contains valid image links. AnQiCMS usually providesThumb(Thumbnail) andLogo(Leading image) field, we should prioritize using the thumbnail, and if the thumbnail does not exist, consider using the leading image.

`twig {% prevArchive prev %} {% if prev and prev.Link %} {# Ensure prev object exists and has a valid link #}

<a href="{{ prev.Link }}" title="{{ prev.Title }}">
  {% if prev.Thumb %}
    <img src="{{ prev.Thumb }}" alt