Vue项目动态图片加载失败求助：资源返回404错误

问题根源 #

直接在数据里写@/assets/xxx这类字符串路径时，webpack/Vite不会自动解析别名和处理资源文件，最终浏览器请求的就是原字符串路径，导致服务器返回404错误。

分环境解决方案 #

1. Vue2 + Webpack 环境 #

定义图片路径时用require()包裹，让webpack提前处理资源并生成编译后的正确路径：

<script>
export default {
  name: 'Gallery',
  data() {
    return {
      galleryImages: [
        {
          path: require('@/assets/images/services/whitening/whitening1.png'),
          category: 'teeth-whitening',
          alt: '牙齿美白'
        },
        {
          path: require('@/assets/images/services/all6/all63.png'),
          category: 'all6',
          alt: 'All6项目'
        }
        // 其他图片按此格式添加
      ]
    };
  }
}
</script>

2. Vue3 + Vite 环境 #

Vite不支持require，改用new URL()方法生成可访问的正确路径：

<script setup>
const galleryImages = [
  {
    path: new URL('@/assets/images/services/whitening/whitening1.png', import.meta.url).href,
    category: 'teeth-whitening',
    alt: '牙齿美白'
  },
  {
    path: new URL('@/assets/images/services/all6/all63.png', import.meta.url).href,
    category: 'all6',
    alt: 'All6项目'
  }
  // 其他图片按此格式添加
];
</script>

模板部分无需修改 #

你的模板代码可以保持原样，处理后的page.path已经是浏览器可直接访问的路径：

<div class="row">
  <div v-for="(page, index) in paginatedImages" :key="index" class="col-lg-4 col-md-6">
    <div class="single-gallery">
      <img :src="page.path" :alt="page.alt">
    </div>
  </div>
</div>

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