My localhost route:3000/files/ does not show the image ( express.Static does not return the image)

Asked

Viewed 90 times

-2

In my static file path, it finds the image but returns only its binary and not the image itself for the view.

What I want is to be able to view the image when placing in the browser for example: localhost:3000/files/imagem1.jpg

app.use('/files', express.static(__dirname + '/uploads'));

index.js of the API

var bodyParser = require('body-parser');
var express = require("express");
var cors = require('cors');
var path = require('path');

var app = express();

var router = require("./routes/routes");

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.urlencoded({extended: false}));

app.use(function(req, res, next){
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
    res.setHeader("Access-Control-Allow-Headers", "content-type");
    res.setHeader("Content-Type", "application/json");
    res.setHeader("Access-Control-Allow-Credentials", true);
    next();
   });
// parse application/json
app.use(cors());

app.use(bodyParser.json());
app.use(express.json());

app.use('/files', express.static(__dirname + '/uploads'));


app.use("/api", router);

app.listen(3000, function(){ console.log('Servidor Web rodando na porta 3000') });

The return in the browser is the one of the image below. inserir a descrição da imagem aqui insert image description here

javascript node.js api web-application express

  • Important you [Dit] your question and explain objectively and punctually the difficulty found, accompanied by a [mcve] of the problem and attempt to solve. To better enjoy the site, understand and avoid closures and negativations worth reading What is the Stack Overflow and then the Stack Overflow Survival Guide (summarized) in Portuguese. On the print provided, it appears to be a properly formatted JPEG image (but served with the wrong content-type, the browser shows as text).

  • Thanks for the placement, I will go better in the next ones, that was my first question on the site. I have posted the solution, maybe I have lacked comment with details, but soon I will edit better.

  • If I understood your answer correctly, what might have made it work was taking the wrong header res.setHeader("Content-Type", "application/json");. It would be better to spell out image/jpeg (but it is an assumption based on what was provided)

  • believe that on account of this excerpt " res.setHeader("Content-Type", "application/json");" all my returns were being in json, but I’m still not sure about it, so check other points I’ll better tailor the answer.

  • Anyway, I recommend a read in the past links to achieve a more effective return in the next, and to help compose the collection of the site.

  • 1

    Yes, I’ll take the time to read the links, thanks again.

Show 1 more comment

2 answers

-1

It is that you are changing the header of the answer to return a JSON. Try to save Cors to a variable and pass only on the route you want to enable. Something like this...

const bodyParser = require('body-parser');
const express = require('express');
const cors = require('cors');
const app = express();

const router = require("./routes/routes");

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.urlencoded({ extended: false }));

const configCors = function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'content-type');
  res.setHeader('Content-Type', 'application/json');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
};

app.options('*', configCors);
app.use(bodyParser.json());
app.use(express.json());

app.use('/files', express.static(__dirname + '/uploads'));

app.use('/api', configCors, router);

app.listen(3000, function() {
  console.log('Servidor Web rodando na porta 3000')
});

-3


const bodyParser = require('body-parser');
const express = require('express');
const cors = require('cors');
const path = require('path');

const router = require("./routes/routes");
const app = express();
app.use(bodyParser.json());
app.use(express.json());

app.use(cors());
app.use(express.urlencoded({extended: true}));
app.use(bodyParser.urlencoded({extended: true}));

app.use('/files', express.static(path.join(__dirname, '/uploads')));

app.use('/api', router);

app.listen(3000, function() {
  console.log('Servidor Web rodando na porta 3000')
});

Browser other questions tagged javascript node.js api web-application express

You are not signed in. Login or sign up in order to post.