2

I have a local express server that serves a json file. I also have many image files inside a local folder. The image paths are parts of the json object which I want to show in my DOM. However I get string representation of these image paths as part of response which I can't use. What is the best way to server local images to the frontend from a local server.

A picture of the issue:enter image description here

My server side config:

app.use(express.static(path.join(__dirname, 'public')))
app.use(express.static(path.join(__dirname, 'server/img')))

My JSON file

{
  "Images": [{
    "title": "First Block",
    "images": ["server/img/bijay.jpg", "server/img/dance.png", "server/img/ocean.jpg"]
  }, {obj2}, {obj3}, {obj4}]
}

My client-side code to print image

<ul>
  <li ng-repeat="obj in objArray"><img ng-src="{{obj.images[0]}}"></li>
</ul>
// just testing first image

My folder structure:

images are inside img folder. not shown to save space

Images are inside the img folder. not shown here to save space

Bijay Timilsina
  • 757
  • 2
  • 10
  • 25

2 Answers2

2

Finally after a lot of rethinking, I found the solution.

I had defined the 'static' folder in the server as 'server/img'. However, inside the json object, I was assigning the absolute path for the image files again. All I needed to do was 'server/image/imgFileName.jpg' to resolve the conflict :))

Bijay Timilsina
  • 757
  • 2
  • 10
  • 25
1

Based on the comments of @Tolsee:

Place the images in a 'public' folder. (/public/img/dance.png) Then in your express app add the following line:

let app = express();
app.use(express.static(path.join(__dirname, 'public')));

The images will be available with the following url:

localhost:port/img/dance.png

You could just serve /server/img and then just use the following:

let app = express();
app.use(express.static('/server/img'));

localhost:port/dance.png

Some configuration might be needed depending on your project structure.

Cédric De Dycker
  • 71
  • 7
  • ahh i get it. i had the same configuration of serving static files from 'public' folder but the images were inside 'server' folder. So I suppose adding the line app.use(express.static('/server/img')) would be enough..i'll check it now – Bijay Timilsina Apr 04 '17 at 16:51
  • I can't put images inside public folder as I need to emulate as if the images come from a server – Bijay Timilsina Apr 04 '17 at 17:10
  • What url do you use to retrieve the images? If you still want to acces them with localhost/server/img you have to change to app.use('/server/img',express.static('/server/img')); – Cédric De Dycker Apr 04 '17 at 18:19
  • i'm not using url...just the absolute path to files inside the img folder (which is inside server folder) – Bijay Timilsina Apr 04 '17 at 18:27
  • 1
    So from your front-end you want to access files located on the sever by using the absolute path? That's not possible by my knowledge. You will always need to do a call to your express server to request the images. Why is accessing them from within the public folder not enough? There is another thread which might interest you [link](http://stackoverflow.com/questions/5823722/how-to-serve-an-image-using-nodejs) – Cédric De Dycker Apr 04 '17 at 18:34
  • yes it seems posible by the way I have done. you just need to assign the specific folder you want as 'static' by `app.use(express.static(path.join(__dirname, 'yourFolder'))); ` – Bijay Timilsina Apr 04 '17 at 19:36