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

Posted 2023-02-22

【中文标题】在生产中加载图像文件 - React

【英文标题】：Loading image files in production - React

【发布时间】：2017-05-20 14:38:31

【问题描述】：

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

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

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

当运行 dev server 时，当我在控制台中检查这个元素并转到“Sources”时，我看到的文件树是这样的：

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

【问题讨论】：

这更像是一个 node.js 服务器问题（没有反应）。您可以查看此“替换现有服务器端视图解决方案”github.com/reactjs/express-react-views

请注意，您使用的是 ejs 视图引擎，而我的服务器没有。我还建议您查看“create-react-app”github.com/facebookincubator/create-react-app/blob/master/…

的部署部分

【参考方案1】：

我建议您使用 '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"  />
          <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);

总结一下步骤是：

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

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

npm install express --save

npm install path --save

node index.js

导航到 localhost:9000 以查看您的应用程序以及其中的图像。

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