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

Improve this question
5
  • It seems that the given element represent the absolute path of the image, use can simply use src to render Absolute URL. Commented Apr 4, 2017 at 15:00
  • it however gives me a 404 status response for (localhost://server/img/xyz.jpg)...I think it's an issue with trying to access files in the server using absolute paths Commented Apr 4, 2017 at 15:28
  • you should write the url correctly first..Like localhost/server/img/xyz.jpg Commented Apr 4, 2017 at 16:20
  • sorry url is correct..the extra '/' is just a typo Commented Apr 4, 2017 at 16:48
  • If the problem is not resolved yet. Please do provide your server code handling the images... Commented Apr 4, 2017 at 16:51

2 Answers 2

Reset to default
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 :))

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

6 Comments

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
I can't put images inside public folder as I need to emulate as if the images come from a server
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'));
i'm not using url...just the absolute path to files inside the img folder (which is inside server folder)
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
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.