v-carousel无法加载本地PNG，资源返回text/html格式问题求助

尝试用v-carousel组件展示一组本地PNG图片，试了多种本地图片路径写法，但图片始终无法显示。通过开发者工具发现，这些图片资源返回的格式为text/html，而非实际的PNG格式，自查后推测可能存在相关配置问题，请问出现该问题的原因是什么？

<template>
  <div>
    <v-carousel>
      <v-carousel-item
        v-for="(photo, i) in photos"
        :key="i"
        :src="photo.src"
      ></v-carousel-item>
    </v-carousel>
  </div>
</template>

<script>
export default {
  name: 'RotatingPhotos.vue',
  data() {
    return {
      photos: [
        {
          src: '../src/assets/latte.png',
        },
        {
          src: './src/assets/icedtea.png',
        },
        {
          src: '@/src/assets/mocha.png',
        },
        {
          src: 'src/assets/brunch.png',
        },
      ],
    };
  },
};
</script>

原因分析 #

• 路径完全错误，导致请求404页面：你写的所有路径都不符合Vue项目的资源引用规则，浏览器请求的地址根本不存在，服务器返回了404错误的HTML页面，所以Content-Type显示为text/html。比如@在Vue中默认指向src目录，@/src/assets/...相当于src/src/assets/...，路径重复；../src/assets、./src/assets这类相对路径，打包后会被当作浏览器端的相对路径去请求，而实际部署后的项目结构里根本没有src目录，自然找不到资源。

• 静态资源未被构建工具正确处理：Vue项目中，本地图片要被webpack或Vite正确打包，必须使用符合规则的路径。如果路径写法错误，构建工具不会把这些图片识别为静态资源，只会原样保留路径，最终浏览器请求的是错误地址，拿到的是404页面。

• 补充正确的引用方式：正确的路径应该直接用@/assets/latte.png（因为@已指向src）；或者在script中通过require导入，比如：

  photos: [
    {
      src: require('@/assets/latte.png')
    }
  ]
  

  这样构建工具会自动处理资源，生成打包后的正确路径。

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