image - 在生产中加载图像文件 - React

Question

我已经构建了我的第一个完整的 React 应用程序，它运行良好。我加载了我的开发服务器，一切都完全按照我的希望加载。值得注意的是，我的图像文件加载完美。

在我的开发服务器上成功加载图像的示例:

<img src='./img/sq/filename.jpg' />

运行 时开发服务器 ，当我在控制台中检查这个元素并转到“源”时，我看到的文件树是这样的:

- localhost:3333
  - css [folder]
  - js [folder]
  - img/sq [folder]
    - filename.jpg 
  - index [file]

这是我所期望的。

但是，当运行 生产服务器 ，图片加载失败。当我检查元素并转到“来源”时，我看到的是:

- localhost:3000
  - static [folder]
    - css [folder]
    - js [folder]
    - index [file]

所以我的生产版本显然忽略了 /img/sq文件夹。

我听说过 file-loader 和 url-loader，但我还没有找到一个清晰而简单的解释来说明它们的作用以及如何使用它们。我已经成功地将这两个安装到我的依赖项中，并且我已经将此加载程序添加到我的 webpack.config.js 文件中:

{
  test: /\.(jpe?g|png|gif|svg)$/i,
  loaders: [
    'file?hash=sha512&digest=hex&name=[hash].[ext]',
    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
  ]
}

这样做之后，我不确定这应该如何改变图像的加载方式。我应该更改引用图像的方式吗？任何帮助/指针将不胜感激，因为这让我很难过。

更新:

这是我的 server.js 文件。除了我使用 res.render 之外，我看不出您发布的代码与我自己的代码有任何根本区别。方法，给您的 res.sendFile .

这里有什么我可能错过的吗？

server.js

var express = require('express') 
var app = express(); 


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


 app.set('views', __dirname + '/views'); 
 app.set('view engine', 'ejs'); 


 app.get('*', function (req, res) { 
     res.render("index"); 
 }); 


 const port = process.env.PORT || 3000; 
 const env = process.env.NODE_ENV || 'production'; 
 app.listen(port, err => { 
   if (err) { 
     return console.error(err); 
   } 
   console.info(`Server running on http://localhost:${port} [${env}]`); 
 }); 

Answer 1

我建议您使用 '创建 React 应用程序' 作为骨架。

https://github.com/facebookincubator/create-react-app

您可以将图像添加到创建的 App.js 以测试图像是否在您的开发和生产服务器中加载。

添加图像的应用程序类应如下所示:

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <img src='./img/sq/filename.jpg' />
      </div>
    );
  }
}

例如，您可以使用 node.js 服务器使用此代码(文件 index.js)和使用 react 代码 的构建文件夹成功加载图像

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static('./build'));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, './build', 'index.html'));
});

app.listen(9000);

总结这些步骤是:

使用“创建 React 应用程序”为您的应用程序创建框架

在渲染代码中添加单个图像(使用上面的代码)

运行npm run build创建包含图像的构建文件夹

使用 node.js 代码创建服务器(使用上面的代码)并将构建文件夹(在上一步中创建)放在 index.js 节点代码旁边。
备注:您应该安装 'express' 'path' 模块，然后运行您的服务器 node.js 代码。
npm install express --savenpm install path --savenode index.js

导航到 localhost:9000查看包含图像的应用程序。

这些步骤应该可以帮助您解决问题，因为它是如何构建用于生产的 react 代码并在生产环境中查看图像的示例。