Vue.js开发环境相对路径使用：Laravel+Vue项目多环境路径适配问题

我在laravel/vue.js项目的开发、生产环境中遇到了路径适配问题。

CSS文件场景 #

开发环境执行npm run hot时仅支持绝对路径URL，例如/public/images/image.png；而生产环境执行npm run prod + php artisan serve时仅支持相对路径，例如../images/image.png。
我在vue中使用相对路径时，浏览器无法加载图片，控制台报错如下：

GET http://localhost:63342/images/image.png?ffda917d2a7141d8413f313bccf119c5 404 (Not Found)

Vue模板场景 #

为了在生产环境正常使用内联图片，我需要将路径包裹在require().default中，示例代码如下：

<img :src="require('../images/image.png').default" class="emailIcon" alt="">

但require()在开发环境中无效，执行npm run hot时图片无法加载，浏览器控制台报错如下：

GET http://localhost:63342/images/image.png?ffda917d2a7141d8413f313bccf119c5 404 (Not Found)

项目运行环境配置 #

Windows 10
Laravel: 8.55.0
Vue.js: 4.5.13

补充1 #

根据@Chandan的评论提示，我发现如果images文件夹放置在public目录下，<img src="images/image.png">写法可以同时适配两个环境。
但该方案不适用于背景图场景的url("images/image.png")写法，请问是否有对应的解决方案？

补充2 #

我最终没有找到适配两个场景的最优方案，因此弃用npm run hot，改为将npm run watch与php artisan serve关联使用，现在我使用带热重载的生产环境进行开发，配置方法可自行搜索Laravel项目修改后自动刷新相关教程获取。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov