Laravel与Vue开发：如何在Vue组件中加载public文件夹下的图片

核心错误原因 #

Laravel的public目录是Web服务器默认指向的站点根目录，你在资源路径中额外加上/public前缀，实际会请求public/public/images/logo/black.png这个不存在的路径，所以加载失败。
另外{{ asset() }}是Blade模板的服务端语法，仅在.blade.php文件中会被Laravel解析，Vue文件属于前端编译范畴，服务端不会处理该语法，因此直接使用会抛出编译错误。

可用解决方案 #

方案1：直接去掉路径中的/public前缀（最简单，适配大多数场景） #

直接修改img标签的src属性即可：

<template>
    <div>
        <div class="header-container">
            <div class="header-content">
                <div class="logo-container">
                    <img :src="'/images/logo/black.png'" alt="logo">
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

如果你的项目部署在域名根目录下，这个方案可以直接生效。

方案2：适配子目录部署场景，模拟Laravel asset()效果 #

如果你的项目部署在域名的子目录下，可以通过全局挂载资源前缀的方式实现和asset()一致的效果：

1. 在项目入口Blade模板中添加全局变量（通常是你挂载Vue应用的模板文件）：

   <!-- 在引入Vue的JS文件前添加这段代码 -->
   <script>
   window.ASSET_PREFIX = "{{ asset('') }}";
   </script>
   

2. 在Vue组件中直接调用该全局变量拼接路径：

   <img :src="window.ASSET_PREFIX + 'images/logo/black.png'" alt="logo">
   

方案3：Vite构建项目的适配方案 #

如果你使用的是新版Laravel默认的Vite构建工具，可以直接通过环境变量配置资源前缀：

1. .env添加配置：

   VITE_ASSET_URL="${APP_URL}"
   

2. Vue组件中使用：

   <img :src="`${import.meta.env.VITE_ASSET_URL}/images/logo/black.png`" alt="logo">
   

内容的提问来源于stack exchange，提问作者RC07JNR