How can I use JSON image file object on ejs - node.js

Question

I want to use an image on my ejs code, but I use loop with JSON array, so I want to make image url to object of JSON.
I put the JSON object way on the source code.
{
"champion" :
[
{
"id": "266",
"key": "Aatrox",
"name": "Aatrox",
"origin": ["Demon"],
"class": ["Blademaster"],
"cost": 3,
"img" : "https://ddragon.leagueoflegends.com/cdn/9.17.1/img/champion/Aatrox.png",
This json file's local data name is "cdata".
<!-- Champion Data -->
<% for(var i=0; i<cdata.champion.length; i++){ %>
<div class="col-xl-12 col-md-6 mb-12">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-3"><h3><%= cdata.champion[i].name %></h3></div>
<img src= <%= "cdata.champion[0].img" %> class="ChampionImage__ChampImage-xj39xo-2 fhAQxz">
<div class="h5 mb-0 font-weight-bold text-gray-800"><%= cdata.champion[i].key %></div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<% } %>
My website shows broken image https://ykyuen.files.wordpress.com/2015/10/svg-image-broken.png
after that, I changed the code to
<img src= "<%= cdata.champion[0].img %>" class="ChampionImage__ChampImage-xj39xo-2 fhAQxz">
and
<img src= <%= cdata.champion[0].img %> class="ChampionImage__ChampImage-xj39xo-2 fhAQxz">
but it still doesn't work.

Answer 1

You can simplify your code from using for loop to use .forEach Here is docs
<% cdata.champion.forEach(function(champion){ %>
<div class="col-xl-12 col-md-6 mb-12">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-3"><h3><%= champion.name %></h3></div>
<img src="<%= champion.img %>" class="ChampionImage__ChampImage-xj39xo-2 fhAQxz">
<div class="h5 mb-0 font-weight-bold text-gray-800"><%= champion.key %></div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<% }) %>
In my case, I've used <img src="<%= image %>" and it worked.
Of course, the code should work only in case of correctly parsed JSON.