현업 SW 개발자의 연구 노트
Hits

GitHub Pages Jekyll Liquid에서 for 반복문에 의해 img 테그가 깨지는 현상

Hits
How to workaround image tag escape problem.

GitHub Pages를 이용해서 본 웹페이지를 운영하고 있다. Jekyll은 내부적으로 Liquid 문법을 이용하고 있다. for 반복문과 img 테그를 조합해서 미리 보기 기능을 구현했다. 이유는 알 수 없지만 img 테그가 깨지는 문제가 발생했다. 이 문제점에 대해서 근본 원인은 알 수 없지만, workaround는 있다.

문제 내용 설명

아래는 최근 포스트 5개의 이미지를 보여준다.

코드


{%- for post in site.posts limit:5 %}
  {%- if post.image %}
    <img style="border-radius: 20px;" src="{{ post.image }}"><br />
  {% endif %}
{% endfor %}

또 다른 코드

    <a href="/r/2024/09/21/r-install.html"><img style="border-radius: 20px;" src="/assets/images/r/logo.png"></a><br />
  

    <a href="/diary/2024/08/14/%EC%99%80%EC%9D%B4%ED%94%84%EB%8B%98-%EC%9E%90%EC%A0%84%EA%B1%B0-%EC%82%AC%EA%B3%A0-%EB%B0%8F-%ED%8C%8C%EC%86%90.html"><img style="border-radius: 20px;" src="/assets/images/diary/2024/08/2024-08-14-와이프님-자전거-사고-및-파손.JPG"></a><br />
  

    <a href="/diary/2024/08/13/%EB%A9%80%ED%8B%B0%EC%BA%A0%ED%8D%BC%EC%8A%A4-HRD-Flex.html"><img style="border-radius: 20px;" src="/assets/images/diary/2024/08/2024-08-13-multicampus-hrd-flex-leonardo.png"></a><br />
  

    <a href="/pocketmongo/2024/08/02/pocketmongo.html"><img style="border-radius: 20px;" src="/assets/logo.png"></a><br />
  

    <a href="/diary/2024/05/13/30%EB%B6%84-%EB%8B%A8%EC%9C%84-%EC%8B%9C%EA%B0%84%EA%B4%80%EB%A6%AC.html"><img style="border-radius: 20px;" src="/assets/images/diary/logo.png"></a><br />

실행 결과

    <img style="border-radius: 20px;" src="/assets/images/r/logo.png"><br />
  

    <img style="border-radius: 20px;" src="/assets/images/diary/2024/08/2024-08-14-와이프님-자전거-사고-및-파손.JPG"><br />
  

    <img style="border-radius: 20px;" src="/assets/images/diary/2024/08/2024-08-13-multicampus-hrd-flex-leonardo.png"><br />
  

    <img style="border-radius: 20px;" src="/assets/logo.png"><br />
  

    <img style="border-radius: 20px;" src="/assets/images/diary/logo.png"><br />

실제로 생성되는 html 코드를 보면 <img> 부분이 %ltmg>로 깨진 것을 확인할 수 있다.

근본 해결 방법

이 문제의 근본 원인은 아직 모른다. 하지만 workaround 방법은 존재한다.

임시 조치 방법

<img> 테그에 <figure> 테그를 씌우면 테그가 깨지는 문제를 회피할 수 있다.


{%- for post in site.posts limit:5 %}
  {%- if post.image %}
    <figure><img style="border-radius: 20px;" src="{{ post.image }}"></figure><br />
  {% endif %}
{% endfor %}

요약

만약 Jekyll에서 img 테그가 깨지는 문제가 발생한다면, firure 테그를 img 테그에 씌우면 해결된다.