使用express js渲染图像

Question

我是node.js和express.js的新手，我正在尝试用它们升级我的前端项目。我设法让所有的东西都很完美，除了我要加载的图片。我尝试了我能找到的所有可能的解决方案，但仍然没有幸福的结局。我的项目有一个通用的express文件结构。

我的app.js：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

包含图片的示例div：

<div id="logo" class="col-xs-12">
  <img class="menuClosed" src="http://localhost:3000/images/logoRV.png">
</div>

下面是我在终端上得到的消息："GET /images/logoRV.png200 0.714 ms - 856“

下面是检查员在资源选项卡中告诉我的内容：“试图加载资源时出错”

更新:显然，问题是我在那个文件夹中有一个图像的别名，而不是原始的……保存原始文件后，它被正确渲染。感谢每一个想要帮助我的人。

Answer 1

你需要设置app.use(express.static('path_to_images)来加载静态资源，比如图片。你还没有发布你的路由，所以很难知道当路由器遇到像/images/...这样的url时，你会发生什么，但我猜你只是想从目录中提供静态图像。

您当前正在使用以下代码行设置静态目录：

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

你可以直接把图片放进去。

您还可以设置目录来为特定的urls提供服务，如下所示：

app.use('/images', express.static('photos'))

Answer 2

如果你的图片在文件夹里，就说是公开的。

project ->
         public
              -> images 
                       -> pic1.jpg
                       -> pic2.jpg
              -> uploads
         index.js

您可以告诉express对静态数据使用路径。

app.use(express.static(__dirname + '/public'));

然后，可以在HTML属性中指定相对于公用文件夹的路径。

<img name="picture" src="/images/pic1.jpg" class="card-img-profile pro-img" id="picture" />

Answer 3

您的express服务器通过GET请求请求图像，如果您没有收到图像的响应，我建议修改您的标头配置，查看上面的解决方案应该已经有效，但是“如果还没有解决”，下面的配置可能会有所帮助：

app.use((req, res, next) => {
 res.header('Access-Control-Allow-Origin', '*'); // change '*' to domain to restrict access to domain only
 res.header(
  'Access-Control-Allow-Headers',
  'Origin, X-Requested-With, ContentType, Accept, Authorization'
 );
 if (req.method === 'OPTIONS') {
  // This will tell express that GET requests to images should be allowed
  res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET'); 
  res.status(200).json({});
 }
 next();
});

有关文件服务的说明可在此处找到：http://expressjs.com/en/api.html#res.sendFile