dynamicly loud images in ejs

I have this code but rather then loading the same image I want to loud a different photo every time the ejs for loop outputs the template. Preferably also using ejs. The for loop is towards the bottom of the page. When it comes to the photos being used just use a made up file thanks.

<!DOCTYPE html>
<html>
    <head>
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        
        

        <!-- Accent-colored raised button with ripple -->       
        <div class = "navbar-fixed">
        <nav class="nav-extended">
                <div class="nav-wrapper ">
                  <a href="#" class="brand-logo">Logo</a>
                  <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
                  
                  <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="badges.html"> <i class="material-icons prefix">shopping_cart</i></a></li>
                    <li><a href="badges.html">Sign up</a></li>
                    <li><a href="sass.html">Login</a></li>
                  </ul>
                </div>
                <div class="nav-content">
                  <ul class="tabs tabs-transparent">
                    <li class="tab"><a href="">Top Items</a></li>
                    <li class="tab"><a href="/orders">Tech</a></li>
                    <li class="tab"><a href="/orders">Fashion</a></li>
                    <li class="tab"><a href="/orders">Hobby</a></li>
                    <li class="tab"><a href="/orders">Printed</a></li>
                    <li class="tab"><a href="/orders">Other</a></li>
                    <a href="/order/pageadd" class="waves-effect waves-light btn sell"><i class="material-icons left">attach_money</i>Sell</a>
                    
                  </ul>
                  
                </div>
              </nav>
            </div>
              <ul class="sidenav" id="mobile-demo">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">JavaScript</a></li>
              </ul>
                    <div class="row">
                        <form class="col s12">
                           <div class="row">
                             <div class="input-field col s6">
                             <i class="material-icons prefix">search</i>
                            <input id="icon_prefix" type="text" class="validate">
                             <label for="icon_prefix">Product Details</label>
                           </div>
                         </div>
                      </form>
                    </div>
                   
                    
                   
                      
                   
                    <% for(var i = 0; i < order.length; i++){ %>

                    
                    <div class="card">

                        <div class="card-image waves-effect waves-block waves-light">
                          <div><img src="photo-storage/5bb0e02104309e02c814c9e8.jpeg"></div>
                        </div>

                        <div class="card-content">
                          <p class=" text-darken-4 mdl-typography--font-bold" id = "NameProd" Name = "NameProd" ><%= order[i].NameOfProduct %></p> 
                          
                          <p>Price <%= order[i].OriginalPrice %> : <%= order[i].Discount %>% off</p>
                        </div>

                      </div>
                    <% } %>
                    
                   


                 </body>
</html>


                          </html>                

Thanks so much for the help.

1 answer

  • answered 2018-10-11 20:09 jered

    It depends a bit on how your data is set up (for example the structure of your order JSON data) but it might look something like this:

    <% for(var i = 0; i < order.length; i++){ %>                
      <div class="card">
    
        <div class="card-image waves-effect waves-block waves-light">
          <div><img src="<%= order[i].ImageSrc %>" ></div>
        </div>
    
        <div class="card-content">
          <p class=" text-darken-4 mdl-typography--font-bold" id = "NameProd" Name = "NameProd" ><%= order[i].NameOfProduct %></p> 
    
          <p>Price <%= order[i].OriginalPrice %> : <%= order[i].Discount %>% off</p>
        </div>
    
      </div>
    <% } %>
    

    Note changing the image source to <%= order[i].ImageSrc %>. Just like you're dynamically outputting the NameOfProduct, OriginalPrice and Discount values, if you have an image source value in your data you can dynamically output that too.

    Also just FYI I believe you mean "load" not "loud". ;)