图像未通过反应加载到服务器端渲染中答案

【问题标题】：Image is not loading in server side rendering with react图像未通过反应加载到服务器端渲染中
【发布时间】：2021-03-23 13:32:56
【问题描述】：

我正在使用 Create React App 使用 React DOM Server 进行服务器端渲染。我正在尝试加载静态图像，但它没有显示在我的浏览器中。这是我的 app.js 代码

import './App.css';
import React from "react";
import Pic from './Images/pic.png'
function App() {
  return (
    <div className="App">
      <img src={Pic} />
    </div>
  );
}
export default App;

图像已复制到构建文件夹中，但未显示在浏览器中 Folder hierarchy

我在浏览器中收到以下错误

GET http://localhost:8000/[object%20Object]

【问题讨论】：

请查看以下stackoverflow.com/questions/39999367/…
Pic 包含什么？ console.log 设置调试器断点应该会有所帮助。
在 console.log 上显示空花括号“{}”。
我假设你要么直接运行你的服务器（没有 webpack），要么你的 webpack.config.js 没有为图像导入正确配置。如果您有 webpack.config.js，请将其展示出来，以便我们接下来为您提供帮助。如果你只是直接运行你的服务器，我建议你应该通过 webpack 运行它，并根据你的需要使用合适的配置。如果您在设置方面需要帮助，请让我进一步了解。

标签： reactjs jsx create-react-app server-side-rendering react-dom-server

【解决方案1】：

试试

<img src={require(./Images/pic.png)} width="100" height="50" />

【讨论】：

我正在使用 jsx。我已经厌倦了这个，它不工作。 :(
src={window.location.origin + '/Images/pic.png'}
因为我使用的是节点应用程序，所以窗口对象在这种情况下将不起作用。它将在浏览器的控制台中运行。我在浏览器中厌倦了它在控制台“localhost:8000/Images/pic.png”中显示路径。