Cloudinaryに保存した画像をejsファイル上に表示できない

前提・実現したいこと

Node.js Expressを用いて、商品注文のようなシステムを作っています。
現在、MySQLと接続して、商品のデータベースからejsファイル上に描画するいうことをしているのですが、
画像に関して思うように動かすことができません。画像のパスは取得できているのですが、表示することができません。

画像は、
パス：MySQL上に保存
データ：Cloudinaryに保存をしています。

発生している問題・エラーメッセージ

Failed to load resource: the server responded with a status of 404 (Not Found)

該当のソースコード

ejs
1index.ejsです。
2
3<div class="menu_area">
4    <% boardList.forEach(function(boardItem) { %> 
5      <% if(boardItem.table_id === 1 ){%>
6        <div class="menu_content">
7            <div class="menu_info">
8              <% if(boardItem.img_path){%>
9              <p><%= boardItem.img_path %></p> //デバッグ用
10              <img src="<%= boardItem.img_path %>.png" alt=""> //デバッグ用
11              <a href="<%= boardItem.img_path %>" class="message__image" style="background-image: url(<%= boardItem.img_path %>);"></a> //デバッグ用
12              <% } %>
13              <p class="menu_name"><%= boardItem.name %></p>
14              <p class="menu_lot">(<%= boardItem.lot %>)</p>
15              <p class="menu_price"><%= boardItem.price %>円</p>
16            </div>
17            <button class="item_cart_btn js_cart_btn" data-name="<%= boardItem.name %>" data-price="<%= boardItem.price %>"><i class="fas fa-cart-plus"></i>カートに入れる</button>
18        </div>
19        <% }%>
20    <% }); %>
21    </div>

JavaScript
1index.jsです。
2
3
4router.get('/', function(req, res) {
5  var query = 'SELECT * FROM yasai';
6  console.log('OK1');
7  connection.query(query, function(err, rows) {
8    console.log('OK2');
9    console.log(rows);
10    res.render('index', {
11      title: 'テイクアウトページ',
12      boardList: rows
13    });
14  });
15});