0
238
ViewsI have used <iFrame> tag in my react app but it will open the same file even the file url is different, but if I used <a> tag it open perfectly
item.image URL is coming form the API but when I try to map in <a> tag it will work fine which is for the download icon but for the view icon it will open the same file. 
data.map(item => {
return <>
<Modal open={open} onClose={onCloseModal} center>
<div className="modalContent">
<iframe src={item?.image}>
</iframe>
</div>
</Modal>
<a href={item?.image} target="_blank" download >
<span className="IconBoc">
<AiOutlineDownload />
</span>
</a>
</>
})
·
Juan Pablo Isaza
1 answers
Answer question0
You should be using <img> instead of <iframe>.
iframes are to embed other websites into your website.
For media there already exist tags like <img> or <video>.
Try:
data.map(item => {
return <>
<Modal open={open} onClose={onCloseModal} center>
<div className="modalContent">
<img src={item?.image} />
</div>
</Modal>
<a href={item?.image} target="_blank" download >
<span className="IconBoc">
<AiOutlineDownload />
</span>
</a>
</>
})
·
Juan Pablo Isaza
Report
Answer question