0

I am converting from pdf to canvas and then from canvas to png and displaying it in tag. Everything works perfectly but then after I minimize screen size to below about 1000x353 range, the image src disappears.

I am displaying those images on a grid, using react-sortable-hoc so I am not sure whether it is a bug in react-sortable or whether i am doing something wrong.

Here's the images and canvas div that I put into the sortable-hoc

<div>
                <canvas key={index} style={{display:'none'}} ref={(ref) => this.canvasRefs[`canvas${index}`] = ref} > </canvas>
                <div><span>Page No. {index+1}</span> <span><Icon type="reload" /></span> <span><Icon type="close-circle-o" /></span>  </div>
                <img className={styles.imgThumb} key={index+100} ref={(ref) => this.imageRefs[`img${index}`] = ref} alt = "pdfimage"/>
               </div>

and I give the source to it within the promise after receiving it from server and converting to image from canvas like shown below

imagez.src = canvas.toDataURL('image/png')

so, has this happened with any of you?? any ideas why this happens?

EDIT: Changed title .

faraz
  • 2,603
  • 12
  • 39
  • 61
  • looks like you have a media in css that hides you image smth like @media screen and (max-width: 1000px) display: none; – Sasha Kos May 31 '18 at 10:01
  • Your question title doesn't seem to match the description, please correct it – Shubham Khatri May 31 '18 at 10:03
  • changed the title now. seems like it was a cache issue where title was already populated and i forgot to change it. @SashaKos, the image tag still displays , but the src attribute goes missing after the screen size reduces. – faraz May 31 '18 at 10:11

0 Answers0