[Marked] html안에 image가 있을 경우

사용 라이브러리 : https://marked.js.org/

mark down을 케이스 중에 html tag 안에 image가 있을 경우에 대한 응급 처리.

(미정제 코드, 좋은 방법 있으면 댓글 로 공유 부탁드려요)

 

 

Sample

먼저 샘플 케이스를 살펴보자.

mark down은 아래와 같이 작성되어 있고, 이를 그려내면 아래 Image와 같이 나와야 한다.

mark down

<table><tr>
<td>https://images.hive.blog/DQmWwFSXs6264npQxbEnBmYkjHCXDi8CGhUKY1DDJ8xBXYy/DSC_1973.JPG</td>
<td>https://images.hive.blog/DQmQRExbzza6Mv2dbtDfETtKMEDH9ozy9zk8vEQuTWiC3Gk/DSC_1974.JPG</td>
</tr></table>

markdown  정상 렌더링

markdown success

 

아래는 예외 코드를 넣기전 상황이다. image가 text로 노출이 되고 있다.

버그 수정이 시급하다.

markdown 렌더링 버그

markdown error in delog.io

 

해결방법 (Marked)

      html(html) {
        if (html.includes('http')) {
          if (html.includes('.JPG')) {
            html = html.replace(/http/gi, `<img src="http`);
            html = html.replace(/.JPG/gi, `.JPG"/>`);
          } else if (html.includes('.jpg')) {
            html = html.replace(/http/gi, `<img src="http`);
            html = html.replace(/.jpg/gi, `.jpg"/>`);
          } else if (html.includes('.png')) {
            html = html.replace(/http/gi, `<img src="http`);
            html = html.replace(/.png/gi, `.png"/>`);
          } else if (html.includes('.jpeg')) {
            html = html.replace(/http/gi, `<img src="http`);
            html = html.replace(/.jpeg/gi, `.jpeg"/>`);
          }
        }
        return `${html}`;
      },

위와 같은 코드가 나왔다.

아주 무식한 코드지만, 시간이 없어서 일단 적용해 놓았다.

 

내용을보면, mark down에  html이 들어 있으니, html 함수를 타게되고, 이안에서 image 부분을 tag로 둘러 쌓다.

 

일단은 해결 완료!.