Json-server: How to serve image files?

[vko-online]

Sample image link http://localhost:3000/assets/images/coffee/large/coffee.gif not working with json-server, it's not possible to server static assets? (script files, css styles, images)
Or is there any way to plug sharp (image resizer node package) into json-server

[typicode]

To serve static assets, simply create a ./public directory.

For example:

$ mkdir -p public/assets/images
$ echo "hello world" > public/index.html
$ json-server db.json

If you need more, you can use json-server as a module.

var jsonServer = require('json-server')

var object = {
  posts: [
    { id: 1, body: 'foo' }
  ]
}

var router = jsonServer.router(object) // Express router
var server = jsonServer.create()       // Express server

server.use(router)
server.listen(3000)

You can add middlewares or custom routes as you would do in an Express server. You can even embed json-server router in an existing Express server.

Does that help?

[typicode]

Closing for the moment. Feel free to reopen if needed.

[abyabraham]

Hi typicode,
Would you please elaborate a little on the above solution .I am totally new to this.
-Aby

[bluemix]

after you add images to your public/assets/images directory,
you can get an image like
http://localhost/assets/images/truck-4.png

[camilodelvasto]

I struggled with this too, so I wanted to share what worked for me:

var path = require('path')
var express = require('express')
var jsonServer = require('json-server')
var demodata = require('./db.json')
var routes = require('./routes.json')

var router = jsonServer.router(demodata) // Express router
var server = jsonServer.create()       // Express server

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

// Avoid CORS issue
server.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

server.use(jsonServer.rewriter(routes))
server.use(router)

server.listen(3004)

All my images are under public/assets/images, and I'm also storing the routes and db data in separate files. Hope this helps somebody!

[buildAll]

@camilodelvasto Thanks, it helps me get the images from json server. And for anyone else who comes here, please be aware that the folder name must be public. Then load images like this: http://localhost:3000/assets/images/abc.png

[mguilhermetavares]

after I add images to my public/assets/images directory,
and add a Custom route like:

{
    "/api/test":"/assets/images/test.png"
} 

server return NOT FOUND 404:

GET /api/test 404 1.770 ms - 2

but I can access by the full path:
http://localhost:5000/assets/images/test.png -->> 200 OK

[vickyru]

@mguilhermetavares any idea how it will work with custom routes also? Facing same issue as you but not able to figure out solution.

[vijeth11]

I have put my images in public/assets/images path
still I am not able to get image in http://localhost:3000/assets/images/uthappizz.png

[Gabrielfcs]

If you are using public/assets/images and all of your images are inside this folder for example, the uri will be http://localhost:3000/image.jpg not http://localhost:3000/public/assets/images/image.jpg

[pavan-code]

Images are loading in the local json-server. But when I'm hosting the json server using git repo, images are not accessing. Can anyone tell me how to access the same images through git fake api repo.