Question

我是应该通过导入相对路径还是通过引用文件URL来加载节点中的照片，以及如何从相对路径正确加载照片？

目前我正在使用express：

提供静态文件

server.use(express.static(__dirname + '/../public'));

通过引用文件网址加载照片：

  <img src='/images/tom.jpg'/>

我有一个webpack配置设置为使用文件加载器（png | jpg | gif），webpack文档说，使用文件加载器，你可以从相对路径导入照片（https://webpack.js.org/loaders/file-loader/#src/components/Sidebar/Sidebar.jsx）：

import img from './file.png'

使用此配置（这是我正在使用的配置）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]
  }
}

然而，当我尝试从它的相对路径导入图像时：

//import   
import img from '../../public/images/tom.jpg';

//render
<img src={img}/>

我收到此错误：

/Users/ryan/Desktop/Df/Coding/ryanchacon.io/node_modules/babel-core/lib/transformation/file/index.js:590         扔错了;         ^

语法错误：   /Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg：   意外字符' '（1：0）


1 |

但是如果我发出'从相对路径导入'，启动我的服务器，然后再添加相对导入，图像将从其相对路径加载。但是，如果我重新启动服务器，错误将再次出现。

所以相反我引用文件URL来解决这个错误，但是我不确定如何使用我的webpack / node配置从他们的相对路径正确加载文件。

目前，我正在运行节点v8.6.0，webpack v3.6.0，express v4.15.4，file-loader v1.1.5，以及反应v16.0.0。

Answer 1

在server.js文件中，您正在使用服务器端呈现（非常棒）：ReactDOMServer.renderToString( <App /> )。服务器端呈现的App组件通过import App from './src/App';语句导入。在App.js文件中，您有JPG import语句：import img from '../public/hermes.jpg';。

请注意在此上下文中，您的node.js不知道项目中的任何webpack包，并且节点实际上尝试导入'../public/hermes.jpg'文件，这会导致错误你面对的是（节点只能加载JS模块）。

所以问题实际上是如何以通用/同构的方式使用file-loader。您可以查看此示例项目：https://github.com/webpack/react-webpack-server-side-example，它显示服务器和客户端代码的Webpack配置。从理论上讲，如果您通过webpack捆绑服务器代码，则在运行时，JPG import语句已经由文件加载器处理，不应该导致任何问题。我不得不承认，我个人认为捆绑服务器代码不是一个好主意（捆绑解决了客户端问题，这些问题在服务器端并不相关）。

如果您坚持使用file-loader并将图像文件捆绑到客户端代码中，那么使用服务器端webpack可能是一个很好的解决方案。如果没有，您只需加载/public文件夹中的图像。

对于它的价值，我相信使用URL加载图像不仅更简单，而且更快 - 浏览器将下载更轻的JS包（它更轻，因为它不包含编码的图像文件），你的代码将开始运行，以并行，异步的方式从HTTP下载图像。

如何使用Node和Webpack正确加载照片？

1 个答案: