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
Post a Comment