javascript - React - Dynamically rendering an image -


i want dynamically upload image concatenating url variable contains name of image:

<img src = {require(`./images/${imagestore[i]}`)}/> // imagestore[i] prints name of image  

as comment above says, imagestore[i] prints out name of image (mars.png) if insert variable in p tag. keep getting error message:

unhandled rejection (error): cannot find module './undefined'. 

even weirder, when app rendered, can see image present short time before errors error message, meaning isn't undefined @ all.

i pushing items in array follows:

for(var = 0; < image.length; i++){       imagestore.push(image[i])     } 

i not sure whether problem because have done exact same code 2 other arrays , has worked fine:

screenshot of how app renders far

the other 2 fields (test 1 , test2) made exact same process, without require:

const product = (props) => {     var imagestore = []     var namestore = []     var pricestore = []     var mixstore = []     let image = props.imageprops     let view = props.foodprops     let prices = props.priceprops       for(var = 0; < view.length;i++){       namestore.push(view[i])     }     for(var = 0; < prices.length;i++){       pricestore.push(prices[i])     }     for(var = 0; < image.length; i++){       imagestore.push(image[i])     }     var urllink =  namestore     console.log(urllink,'imageurl')     console.log(image)     for(var = 0; < namestore.length; i++){       mixstore.push(         <div classname='imagewrapper'>           <div classname='photo'>             <img src = {require(`./images/${imagestore[i]}`)}/>           </div>           <div classname ='nameholder'>             {namestore[i]}           </div>           <div classname ='priceholder'>             {pricestore[i]}           </div>         </div>       )     }      return(       <div>         <div classname='productwrapper'>           {mixstore}           <div classname='pricewrapper'>           </div>         </div>       </div>     )   } 

any suggestions issue?

thanks

i'm not sure need require here. why not do:

<img src = {`/images/${imagestore[i]}`}/> 

Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -