Question

我已经构建了我的第一个完整的React应用程序，它运行得很漂亮。我加载了我的开发服务器，所有内容都完全按照我的意愿加载。值得注意的是，我的图像文件加载完美。

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

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

运行 dev服务器时，当我在控制台中检查此元素并转到“Sources”时，我看到文件树如下：

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

这正如我所料。

但是，运行生产服务器时，无法加载图像。当我检查元素并转到'Sources'时，这就是我所看到的：

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

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

我听说过文件加载器和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

我建议您使用＆＃39;创建反应应用作为骨架。

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

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

我们添加了图片的app类应如下所示：

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

总结一下步骤：

使用＆＃39;创建React应用程序＆＃39;为您的应用程序创建一个框架
将单个图像添加到渲染代码（使用上面的代码）
运行npm run build以创建包含图像的构建文件夹
使用node.js代码创建服务器（使用上面的代码）并将您的构建文件夹（在上一步中创建）放在index.js节点代码旁边。备注：你应该安装＆＃39;表达＆＃39; ＆＃39;路径＆＃39;模块，然后运行您的服务器node.js代码。

npm install express --save

npm install path --save

node index.js
导航至localhost:9000以查看包含图片的应用。

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

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

1 个答案: