在前端开发中，Progressive Web App (PWA) 已经成为了越来越流行的技术，它可以让 Web 应用更像原生应用一样，具有更好的用户体验。其中，图片是 Web 应用中非常重要的一部分，然而，在使用 PWA 打包后，图片的显示可能会遇到一些问题，比如图片无法显示、显示不全等，本文将介绍如何解决 PWA 打包后的图片显示问题。
问题分析
在 PWA 中，通常会使用相对路径引用图片资源，比如下面的代码：
<img src="./images/image.png" alt="图片">
打包后，会将所有资源打包成一个文件，路径会变成相对于打包后的文件路径。比如，假设我们的打包后的文件在 /dist/ 目录下，那么上面的代码就变成了：
<img src="/dist/images/image.png" alt="图片">
在这种情况下，我们在开发时可能不会遇到问题，但是，在部署到服务器或在本地启动的时候，就会出现图片无法加载的问题。因为浏览器会从 /dist/images/image.png 这个路径去请求图片资源，但是实际上这个路径并不存在。
解决方案
为了解决这个问题，我们需要对图片的路径进行修正。通常有两种解决方案：
1. 使用绝对路径
使用绝对路径的方式可以避免相对路径的问题。可以在引用图片资源的地方使用绝对路径，如下所示：
<img src="/images/image.png" alt="图片">
这样，在打包后，我们的图片路径就是 /images/image.png，可以避免相对路径无法加载的问题。但是这种方法有一个缺点，在部署时需要知道图片的绝对地址，这比较麻烦。而且，如果我们在多个页面使用了同一个图片，那么就需要在每个页面都写一遍绝对路径，比较重复。
2. 使用 Webpack 插件
如果我们使用 Webpack 打包工具的话，可以使用一个叫做 copy-webpack-plugin 的插件来复制资源文件，并将其拷贝到打包后的文件夹中，就可以避免相对路径无法加载的问题。该插件会把你指定的根目录下的文件复制到打包后的目录中，代码如下：
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- -------------- - - -------- - --- ------------------- - ----- ------------ --- ------------ - -- - --展开代码
这个插件会将根目录下的 images/ 文件夹中的所有文件，复制到打包后的 ./images/ 目录下。
示例代码
我们可以使用 create-react-app 创建一个新的 React 应用程序来演示如何解决 PWA 打包后的图片显示问题。对于这个示例，我将使用 copy-webpack-plugin 插件。
- 创建一个新的 React 应用程序：
npx create-react-app pwa-image-demo
- 安装
copy-webpack-plugin：
npm install copy-webpack-plugin --save-dev
- 在
webpack.config.js文件中添加以下代码：
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- -------------- - - -- --- -------- - --- ------------------- - ----- ------------------- --- ------------ - -- - --展开代码
这个插件会将 ./public/images/ 文件夹中的所有文件，复制到打包后的 ./images/ 目录下。
- 接下来，我们可以在
src/App.js中引用我们的图片：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---- ---- ------------------------------- -------- ----- - ------ - ---- ---------------- ------- ----------------------- ---- ---------- -------------------- ---------- -- --- ---- ----------------------- --- ---- -- ------- ---- --------- ------ -- - ------ ------- ----展开代码
这里我直接将图片放在了 ./public/images/ 目录下，Webpack 会把它复制到打包后的代码中。
- 启动应用程序：
npm start这个演示应用程序已经修复了 PWA 打包后的图片显示问题。你可以在自己的项目中试试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ba84ea306f20b3a695181d
