Laravel+Vue+Inertia中如何通过函数读取图片路径并正常编译？

当在Vue模板中使用静态src属性时，Vite能正确解析../../img/map.jpg路径，编译后图片正常显示；但改用动态绑定:src（比如通过函数返回路径）时，浏览器会请求localhost:8000/img/map.jpg导致404。核心原因是Vite对静态路径和动态路径的处理逻辑不同：

• 静态src：Vite会做静态资源分析，自动将相对路径转换为编译后的正确资源路径
• 动态:src：Vite无法提前识别要加载的资源，不会处理路径，直接将字符串作为浏览器请求路径

以下是三种可行的解决方案：

方案1：使用new URL()构建动态路径 #

在Test.vue的方法中，通过new URL()配合import.meta.url让Vite正确解析资源：

<script setup>
function getImgUrl(filename) {
  return new URL(`../../img/${filename}`, import.meta.url).href
}
</script>

<template>
  <img :src="getImgUrl('map.jpg')" alt="Map" />
</template>

import.meta.url表示当前模块的URL，new URL()会基于这个URL解析相对路径，Vite编译时会自动处理成正确的资源路径。

方案2：配置Vite别名简化路径 #

如果想彻底去掉../，可以在Vite配置中设置别名，指向resources/img目录：

1. 修改vite.config.js，添加resolve.alias配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
  resolve: {
    alias: {
      '@img': path.resolve(__dirname, 'resources/img'),
    },
  },
});

2. 在Test.vue中使用别名构建路径：

<script setup>
function getImgUrl(filename) {
  return new URL(`@img/${filename}`, import.meta.url).href
}
</script>

<template>
  <img :src="getImgUrl('map.jpg')" alt="Map" />
</template>

方案3：批量预加载图片资源 #

如果需要加载多个图片，可以用import.meta.glob批量导入所有图片资源，编译时Vite会自动处理路径：

<script setup>
// 预加载img目录下所有jpg图片，返回资源URL
const imgMap = import.meta.glob('../../img/*.jpg', { eager: true, as: 'url' })

function getImgUrl(filename) {
  return imgMap[`../../img/${filename}`]
}
</script>

<template>
  <img :src="getImgUrl('map.jpg')" alt="Map" />
</template>

这种方式适合需要加载多个图片的场景，Vite会在编译阶段把所有匹配的图片都处理好，避免运行时路径错误。

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