4

我已经构建了我的第一个完整的 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.

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

服务器.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}]`); 
 });
4

1 回答 1

0

我建议你使用“Create React App”作为骨架。

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>
    );
  }
}

例如，您可以使用此代码（文件 index.js）和带有反应代码的构建文件夹成功地使用 node.js 服务器加载图像

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);

总结一下步骤是：

  1. 使用“Create React App”为您的应用程序创建骨架
  2. 将单个图像添加到渲染代码（使用上面的代码）
  3. 运行npm run build以创建包含图像的构建文件夹

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

    npm install express --save

    npm install path --save

    node index.js

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

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

于 2017-01-05T22:54:48.437 回答