Laravel项目中Vue组件内引用静态图片的正确方法

我来帮你梳理下Laravel中Vue组件引用静态图片的正确姿势，你之前踩的坑其实都是路径逻辑或资源处理规则的问题，分两种场景给你解决方案：

一、图片放在public/imgs目录下 #

这个目录是Web服务器的根目录，资源可以直接通过URL访问，核心是要使用绝对路径（开头加斜杠）：

<img src="/imgs/sample.jpg" alt="示例图片">

你之前写的imgs/sample.jpg是相对路径，浏览器会根据当前页面的路由拼接请求地址（比如当前路由是/posts/1，就会请求/posts/1/imgs/sample.jpg），自然找不到资源。加上开头的斜杠后，不管路由在哪，都会直接从Web根目录找图片。

二、图片放在resources/imgs目录下 #

这个目录的资源需要经过构建工具（Mix/Vite）处理后才会发布到public目录，所以要配合require()或import，同时注意路径层级：
假设你的组件路径是resources/js/components/MyComponent.vue，图片在resources/imgs/sample.jpg，相对路径需要往上跳两级（从components到js目录，再到resources目录），正确写法是：

<img :src="require('../../imgs/sample.jpg')" alt="示例图片">

进阶：用别名简化路径 #

你可以给构建工具配置别名，避免每次写冗长的相对路径：

针对Laravel Mix（老版本Laravel）

在webpack.mix.js中添加别名配置：

mix.webpackConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/')
        }
    }
});

之后就能用别名快速引用：

<img :src="require('@/imgs/sample.jpg')" alt="示例图片">

针对Laravel Vite（新版本Laravel）

在vite.config.js中添加别名配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/'),
        },
    },
});

然后在Vue组件中可以这样用：

<script setup>
import sampleImage from '@/imgs/sample.jpg';
</script>

<template>
    <img :src="sampleImage" alt="示例图片">
</template>

常见错误排查 #

• 路径层级错误：一定要确认组件到图片的相对路径是否正确，多试几次../或../../验证
• 构建工具未重新编译：修改resources目录下的资源后，记得重新运行npm run dev或npm run build让工具处理资源
• 混淆两种目录的规则：public目录用绝对路径，resources目录必须通过构建工具处理引用

内容的提问来源于stack exchange，提问作者John Paul Lopez