javascript - Get real image path from json response - Stack Overflow

admin管理员组

文章数量:1392110

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:

My server side config:

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

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:

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 the img folder. not shown here to save space

• javascript
• json
• express

Share Improve this question Follow edited Apr 4, 2017 at 17:07 Bijay Timilsina asked Apr 4, 2017 at 14:54 Bijay TimilsinaBijay Timilsina 75722 gold badges1111 silver badges2525 bronze badges 5

• It seems that the given element represent the absolute path of the image, use can simply use src to render Absolute URL. – Tolsee 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 – Bijay Timilsina Commented Apr 4, 2017 at 15:28
• you should write the url correctly first..Like localhost/server/img/xyz.jpg – Tolsee Commented Apr 4, 2017 at 16:20
• sorry url is correct..the extra '/' is just a typo – Bijay Timilsina Commented Apr 4, 2017 at 16:48
• If the problem is not resolved yet. Please do provide your server code handling the images... – Tolsee Commented Apr 4, 2017 at 16:51

Add a ment  | 

2 Answers 2

Sorted by: 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 :))

Based on the ments 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.

本文标签： javascriptGet real image path from json responseStack Overflow