如何使用 Node 和 Webpack 正确加载照片?
How to properly load photos with Node and Webpack?
我应该通过导入相对路径还是通过引用文件在节点中加载照片URL,以及如何从它们的相对路径正确加载照片?
目前我正在使用 express 提供静态文件:
server.use(express.static(__dirname + '/../public'));
并通过引用文件加载照片 URLs:
<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
throw err;
^
SyntaxError:
/Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg:
Unexpected character '�' (1:0)
1 | ����
但是如果我发出 'import from relative path',启动我的服务器,然后添加相对导入,图像将从它的相对路径加载。但是,如果我重新启动我的服务器,错误再次抛出。
所以我引用文件 URL 来解决这个错误,但我不确定我应该如何使用我的 webpack/node 配置从它们的相对路径正确加载文件。
目前,我是 运行 node v8.6.0、webpack v3.6.0、express v4.15.4、file-loader v1.1.5 和 react v16.0.0。
在您的 server.js 文件中,您正在使用服务器端渲染(这很棒):ReactDOMServer.renderToString( <App /> )
。服务器端呈现的 App
组件是通过 import App from './src/App';
语句导入的。在 App.js 文件中,您有 JPG 导入语句:import img from '../public/hermes.jpg';
.
请注意 在此上下文中,您的 node.js 不知道您的项目中有任何 webpack 包 ,并且节点实际上尝试导入 '../public/hermes.jpg'
文件,这会导致您遇到的错误(节点只能加载 JS 模块)。
所以问题实际上是如何以 universal/isomorphic 的方式使用 file-loader
。您可以查看此示例项目:https://github.com/webpack/react-webpack-server-side-example,它显示了服务器和客户端代码的 webpack 配置。理论上,如果你通过 webpack 捆绑你的服务器代码,当你 运行 它时,JPG import 语句已经被文件加载器处理并且应该不会引起任何问题。我不得不承认,我个人认为捆绑服务器代码不是一个好主意(捆绑解决了与服务器端无关的客户端问题)。
如果您坚持使用 file-loader
并将图像文件捆绑到客户端代码中,那么使用服务器端 webpack 可能是一个不错的解决方案。如果没有,您可以简单地从 /public
文件夹加载图像。
就其价值而言,我相信使用 URL 加载图像不仅更简单,而且速度更快 - 浏览器将下载您更轻的 JS 包(它更轻,因为它不包含编码的图像文件)和您的代码将在 运行ning 之前开始,以并行、异步的方式从 HTTP 下载图像。
我应该通过导入相对路径还是通过引用文件在节点中加载照片URL,以及如何从它们的相对路径正确加载照片?
目前我正在使用 express 提供静态文件:
server.use(express.static(__dirname + '/../public'));
并通过引用文件加载照片 URLs:
<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 throw err; ^
SyntaxError: /Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg: Unexpected character '�' (1:0)
1 | ����
但是如果我发出 'import from relative path',启动我的服务器,然后添加相对导入,图像将从它的相对路径加载。但是,如果我重新启动我的服务器,错误再次抛出。
所以我引用文件 URL 来解决这个错误,但我不确定我应该如何使用我的 webpack/node 配置从它们的相对路径正确加载文件。
目前,我是 运行 node v8.6.0、webpack v3.6.0、express v4.15.4、file-loader v1.1.5 和 react v16.0.0。
在您的 server.js 文件中,您正在使用服务器端渲染(这很棒):ReactDOMServer.renderToString( <App /> )
。服务器端呈现的 App
组件是通过 import App from './src/App';
语句导入的。在 App.js 文件中,您有 JPG 导入语句:import img from '../public/hermes.jpg';
.
请注意 在此上下文中,您的 node.js 不知道您的项目中有任何 webpack 包 ,并且节点实际上尝试导入 '../public/hermes.jpg'
文件,这会导致您遇到的错误(节点只能加载 JS 模块)。
所以问题实际上是如何以 universal/isomorphic 的方式使用 file-loader
。您可以查看此示例项目:https://github.com/webpack/react-webpack-server-side-example,它显示了服务器和客户端代码的 webpack 配置。理论上,如果你通过 webpack 捆绑你的服务器代码,当你 运行 它时,JPG import 语句已经被文件加载器处理并且应该不会引起任何问题。我不得不承认,我个人认为捆绑服务器代码不是一个好主意(捆绑解决了与服务器端无关的客户端问题)。
如果您坚持使用 file-loader
并将图像文件捆绑到客户端代码中,那么使用服务器端 webpack 可能是一个不错的解决方案。如果没有,您可以简单地从 /public
文件夹加载图像。
就其价值而言,我相信使用 URL 加载图像不仅更简单,而且速度更快 - 浏览器将下载您更轻的 JS 包(它更轻,因为它不包含编码的图像文件)和您的代码将在 运行ning 之前开始,以并行、异步的方式从 HTTP 下载图像。