前端开发中常常需要使用图片，图片资源通常嵌入HTML代码中，但是在webpack打包后，图片引用路径发生了改变，导致页面无法正确加载图片。那么，在webpack4中，如何解决打包后图片引用路径的问题呢？以下是一些实用的方法。
解决方法
1. 使用file-loader
file-loader可以将我们各种类型的文件（包括图片）输出到指定的文件夹，并返回处理后的文件的publicPath路径（相对于webpack的output.publicPath）。为了让引入的图片也可以输出到output.path目录下，我们需要在loader中设置options.outputPath。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
----------- ----
--
------- -
------ -
-
----- ----------------------
------- --------------
-------- -
----------- ---------- -- ------
----- ------------------------ -- ----
--
--
--
--
--在组件中使用图片：
<img src="<%= require('./image.png') %>" />2. 使用url-loader
url-loader依赖file-loader，它的作用与file-loader相似，不同之处在于它可以将图片资源转化为base64格式直接输出到页面中，从而减少了http请求。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
----------- ----
--
------- -
------ -
-
----- ----------------------
---- -
-
------- -------------
-------- -
------ ----- -- ---------------------
----------- ---------- -- ------
----- ------------------------ -- ----
--
--
--
--
--
--
--在组件中使用图片：
<img src="<%= require('./image.png') %>" />3. 使用html-loader
html-loader可以解决在HTML文件中引入图片的路径问题，绝对路径的图片仍需要使用absolute路径，而相对路径的图片会自动解析为相对于HTML文件的路径。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
----------- ----
--
------- -
------ -
-
----- ----------------------
------- --------------
-------- -
----------- ---------- -- ------
----- ------------------------ -- ----
--
--
-
----- -----------
------- --------------
--
--
--
--在HTML文件中使用图片：
<img src="./assets/image.png" />
总结
无论是使用file-loader、url-loader还是html-loader，都可以有效解决webpack4打包后图片引用路径的问题。在实际项目中，我们需要根据需求选择最适合的loader进行图片处理，以实现最佳的体验效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eeb484f6b2d6eab38ac615