Loading dynamic images from a public website on a private server

Question

I am trying to load images from a private server to which I have access. When loading from the private server, it is throwing errors, although it works fine when I have tried using a local folder.

My code snippet is below:

import React, { Component } from 'react';

export default class DefaultImages extends Component {

 render(){ 
     return(<div className="row">
              <div > <h2>Car Gallery</h2></div>
                  <div  className="slide fdi-Carousel">
                    <div className="onebyone-carosel">
                     {this.list(this.props.ImagesDataJson)}
                   </div>
                      </div>                  
 </div>

);}

list(data) {
 return data.map((data, index) => {

     return ( <div className="item active">
   <div className="col-md-6">
   {data.photo_url.map(function(data, index){ 
         return <img key={index} src={require("http://abc1234566667777777.com/2001/51648/1/10/Thumbnails/339673.Jpeg")}
 className="img-responsive center-block"/>  } )}
      </div>
      </div>
      )
  }) } }

"It throws errors" - cool story bro. Without telling us which errors there is no way we can help you. — MechMK1, Dec 30 '17 at 16:20

score 0 · Answer 1 · answered Dec 30 '17 at 15:42

0

To load the image you can just specify the URL as below

<img key={index} src={"http://example.com/2001/51648/1/10/Thumbnails/339673.Jpeg"} className="img-responsive center-block"/>

Here is a working example https://codesandbox.io/s/8831xy600j

answered Dec 30 '17 at 15:42

Sajith Edirisinghe

1,707
1
12
18

This is slightly different than what the OP asked, as his example will pack the image with the deployed app, and your example loads the image at runtime. I'm not sure which he really wants, just pointing it out. – billjamesdev Dec 30 '17 at 18:12

Loading dynamic images from a public website on a private server

1 Answers1