Question

这是我的文件结构：

app -
  \public
        \images
  \dist
      index.html
      ...other bundles here

如您所见，我有两个文件夹，重建的捆绑文件在dist中，而静态图像文件在公共中。

在我的代码中，有时我会通过webpack导入图像（png，svg）文件，并且这些文件总是显示出来。但是有时我需要通过html嵌入式代码中的url获取图像。这些没有显示在heroku上，但是在localhost中。

这是我的应用设置（快速）：

import express from 'express';
import cors from 'cors';
import path from 'path';
import logger from 'morgan';
import bodyParser from 'body-parser';
import router from './router';
import favicon from 'serve-favicon';
//import compression from 'compression';
global.PUBLIC = path.join(__dirname, '../public');
global.DIST = path.join(__dirname, '../dist');

var debug = require('debug')('app');
const app = express();
// app.use(cors());
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
//app.options('*', cors());

app.use(favicon(path.join(__dirname, '../public', 'favicon.ico')));
app.disable('x-powered-by');

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

app.use(logger('dev', {
  skip: () => app.get('env') === 'test'
}));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

if (process.env.NODE_ENV === 'production') {
   app.use(express.static(DIST));
   app.use("/public", express.static(PUBLIC));
}


router(app);

// Catch 404 and forward to error handler
app.get('/', (req, res, next) => {
  const err = new Error('Not Found');
  err.status = 404;
  next(err);
});


// Error handler
app.use((err, req, res, next) => { // eslint-disable-line no-unused-vars
  //logger.error(err);
  debug(err);

  if (req.app.get('env') !== 'development' && req.app.get('env') !== 'test') {
    delete err.stack;
  }

  res.status(err.statusCode || 500).json(err);
});


export default app;

我的图片中嵌入了此src：

src='./../public/images/nameofimage.png'

我不确定这是否是正确的路径，或者我是否需要在快速代码中以其他方式设置我的静态文件。

有人可以帮忙吗？

无法在Heroku上投放的图片

0 个答案: