1

I'm serious. this is making me going crazy.

I want to display images from raw data from server(nodejs)
node js code is like that

fs.readdir(testFolder, (err, files) => {
  files.forEach(file=>{
    let file_name="./uploads/"+file;
    let data=fs.readFileSync(file_name);
    arr.push(data)
  })
})

and then sends raw data of image array.
such as [ {"type":"Buffer","data":[137,80,78,71,13,10,26,10,0,0,0,13,...]},
{"type":"Buffer","data: ....,}]

I think it's raw data. so I tried encoding it to base64
and then, creating image object.
this is javascript code.

    function alertContents(){
        if(xhr.readyState===XMLHttpRequest.DONE){
            if(xhr.status===200){
                let object=JSON.parse(xhr.response);
                let base=btoa(object[0].data.toString());
                console.log(base)

                let image=new Image();
                image.src=`data:image/png; base64,${base}`
                document.body.appendChild(image);
            }else{
                alert(` :'( `);
            }
        }
    }

and this is html.

<body>
<button id="ajaxButton" type="button" onclick="makeRequest()"> HI </button>

</body>

but It doesn't work properly. no error but no loading image.
could you help me out? :'(
seriously, I'm struggling to solve this for a couple of hours.
but it's really difficult for me

choyoung kim
  • 31
  • 3
  • There are many libraries like jquery to make ajax request why you are still stuck to old way? – Shubham Dixit Sep 27 '18 at 06:28
  • jQuery recomended at user end. – Mustkeem K Sep 27 '18 at 06:29
  • I don't know JQuery :'(. should I use it to solve? – choyoung kim Sep 27 '18 at 06:30
  • Why do you make it unnecessarily complicated? Just send the file-paths to client. – Ram Sep 27 '18 at 06:30
  • I'm beginner so I don't know how to make it easy :'( ... I will search that ways – choyoung kim Sep 27 '18 at 06:31
  • You do not need jQuery for that. Can you give a sample of your binary stream? I am not certain, but it could be that it isn't in the right format or that it is different. – KarelG Sep 27 '18 at 06:31
  • The easiest way is store the file in your server/cloud and just share the path with client, then just use it in the client side – Arunprasanth K V Sep 27 '18 at 06:33
  • @choyoungkim What I meant was: just send the returned value of `.readdir` (`files`) to the client and set the image paths: `img.src = "http://whatever.foo/uploads/ + object[0]"`. It should be mentioned that the server should serve the images. – Ram Sep 27 '18 at 06:36
  • @ArunprasanthKV hmm.. like this? in html, . its result was no loading image. I can't understand it clearly – choyoung kim Sep 27 '18 at 07:03
  • can you copy paste the link in your browser and check whether the image is loading or not ? – Arunprasanth K V Sep 27 '18 at 07:05
  • @choyoungkim Can you access the image via the browser? Just use that address as URL in the bar. If it does not give you an image, please recheck the path and see if the image can be accessed. – KarelG Sep 27 '18 at 07:05
  • @ArunprasanthKV "Cannot GET /uploads/pic1.png" :'( how to solve? I import 'cors' already. – choyoung kim Sep 27 '18 at 07:20
  • @KarelG Nop I couldn't access but I don't know what's problem. do I need any process to make it accessible? – choyoung kim Sep 27 '18 at 07:22
  • so you path is wrong i guess. just check whether your actual file saved, let us know the path. And by the way you cannot simply give localhost:pathname to get the image , you may have to map the path or you may need the actual path – Arunprasanth K V Sep 27 '18 at 07:27
  • @choyoungkim What is the stack you are using? Express, nginx, apache, or? I usually use nginx for serving static files and load balancing. – Ram Sep 27 '18 at 07:28
  • 1
    :'( very touching guys.. I solved it !!!!!!!!!!!!!! I love you XD! I'm using node and I moved pictures to public directory with static module :). finally I can see pictures. Thank you for teaching me the easies way to access server directory !!!!! Thank you a lot XD – choyoung kim Sep 27 '18 at 07:35
  • @choyoungkim I'm very glad that you could solve the problem. Cheers! – Ram Sep 27 '18 at 07:41

0 Answers0