Vue.js项目静态资源路径正确却报404错误求助

问题根源 #

核心原因是从外部JSON获取的图片路径不会被Webpack编译处理。Vue项目里，src/assets下的资源会被Webpack解析、重命名（添加hash）并打包到指定目录，但你从JSON拿到的是原始相对路径，和编译后的实际路径不匹配，导致浏览器请求不到资源。

解决方案 #

方案1：修改JSON路径格式，组件内动态引入资源

1. 调整JSON内容：只保留图片文件名，移除相对路径前缀：

{
  "posts": [
    {
      "author": "Samuel",
      "profilePicName": "user.png",
      "text": "Look at my dog!",
      "picName": "dog.jpg",
      "date": "29. Sept 2022"
    },
    {
      "author": "Bob",
      "profilePicName": "bob.jpg",
      "text": "Hello, I am Bob",
      "picName": "bob.jpg",
      "date": "7. Sept 2022"
    }
  ]
}

2. 修改组件代码：在处理posts数据时，用require动态加载图片资源。Vue CLI中@是src目录的默认别名，可直接用来定位assets路径：

<!-- MainPageBody.vue -->
<script>
import { nanoid } from 'nanoid'

export default {
  data() {
    return {
      posts: null
    }
  },
  async created() {
    const response = await fetch('https://api.npoint.io/21b1db5b0e48a83466da')
    const { posts } = await response.json()
    this.posts = posts.map((post) => {
      return {
        ...post,
        isHeld: false,
        id: nanoid(),
        // 动态解析图片路径
        profilePicName: require(`@/assets/images/${post.profilePicName}`),
        picName: require(`@/assets/images/${post.picName}`)
      };
    })
  }
}
</script>

方案2：将图片移至public目录（无需Webpack处理）

若不想修改JSON和组件逻辑，可把assets/images下的图片移动到项目根目录的public/assets/images文件夹中：

• JSON中的路径改为绝对路径："profilePicName": "/assets/images/user.png"
• 组件保持 :src="post.picName"即可，public目录下的文件会被原样复制到打包后的根目录，浏览器能直接请求到。

验证要点 #

• 确认src/assets/images（方案1）或public/assets/images（方案2）目录存在，且图片文件名和JSON中的完全一致（注意大小写）
• 检查Vue CLI默认配置中，@别名是否指向src目录（默认已配置）

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