使用express js呈现图像

Im新增了node.js和express.js，并且Im试图用它们升级我的前端项目。除了我的图片加载之外，我设法让所有内容都完美无缺。我尝试了所有可能的解决方案，我可以找到并仍然没有快乐的结局。我的项目有一个通用的快速文件结构。使用express js呈现图像

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

这里是消息我得到的终端上： “GET /images/logoRV.png 200 0.714毫秒 - 856“

以下是检查员在资源选项卡中告诉我的内容： ”尝试加载资源时发生错误“

更新：显然问题是，我有一个在该文件夹中的图像别名，而不是原来的...保存原来的正确呈现后。感谢所有想要帮助的人。

来源

2017-07-15 cjlogrono11

而且，您的图像存储在服务器硬盘驱动器的哪里？当你说你在“终端”看到一条消息时，你的意思是在服务器计算机上？ – jfriend00

即时通讯使用本地服务器和图像存储在公共>图像> *这里* – cjlogrono11

如果你只是把这个URL“http：// localhost：3000/images/logoRV.png'直接放到浏览器的URL栏中会发生什么？你在浏览器中看到什么？浏览器控制台说什么？ Chrome网络标签显示什么？ – jfriend00

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

您正在设置一个静态目录这一行：

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

你可以只是把图片在那里。

您还可以设置目录服务，以特定的URL是这样的：

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

来源

2017-07-15 06:09:52

OP声称浏览器说他们获得了200状态，这意味着必须有一条看起来与该图像匹配的路线。 – jfriend00

是的，这很奇怪。我不知道当OP在浏览器中加载http：// localhost：3000/images/logoRV.png时会发生什么？我想知道路线是否匹配，但不返回图像？了解路线中的内容会很有帮助。 –

是的，我对什么位置也显示什么消息感到困惑（因此我对OP的评论）。对于他们发布的消息，如果它们实际上适用于相同的请求，唯一的解释是服务器获取了非图像或损坏的图像，但之后无法由浏览器处理，因为它是一个不好的图像。但是，这似乎不太可能，因此OP公布的信息有些缺陷，这就是我们感到困惑的原因。 – jfriend00

如果您的图片文件夹中，说公众。

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

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

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

然后，您可以指定相对于公用文件夹的HTML attr路径。

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

来源

2017-07-15 08:37:04 Gnanesh

使用express js呈现图像

回答

相关问题