Vue3中图片src绑定及加载404问题求助

1. 修正路径层级错误 #

你当前模板中额外添加的../../会和后端返回的../../../uploaded_images/...叠加，导致路径解析错误，最终浏览器直接请求根域名下的uploaded_images文件夹。

解决方法：
去掉模板中src的../../前缀，直接使用后端返回的路径（后续还要配合静态资源映射），同时修复模板中console.log的使用问题：

<!-- 修改后的模板 -->
<div class="p-3 row">
    <div class="p-3 col-2 photo-container" v-for="(item, index) in images" :key="index">
        <img :src="item" class="photo-image img-fluid" @click="logItem(item)">
    </div>
</div>

在methods中添加日志方法，解决“log已声明但未使用”的报错：

methods: {
    logItem(item) {
        console.log(item);
    },
    // ...原getImagePaths方法
}

2. 配置前端开发服务器访问外部图片文件夹 #

因为uploaded_images位于前端项目的父级目录，Vue开发服务器默认无法访问项目外的文件，需要配置静态资源映射：

针对Vue CLI项目 #

在项目根目录创建/修改vue.config.js，添加如下配置：

const path = require('path');

module.exports = {
  devServer: {
    static: {
      // 指向外部的uploaded_images文件夹
      directory: path.resolve(__dirname, '../uploaded_images'),
      // 映射到前端的访问路径前缀
      publicPath: '/uploaded_images'
    }
  }
}

针对Vite项目 #

在vite.config.js中配置：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    fs: {
      // 允许访问上级目录的uploaded_images
      allow: [path.resolve(__dirname, '../uploaded_images')]
    }
  }
})

3. 调整路径转换逻辑 #

将后端返回的相对路径转换为前端可访问的绝对路径，把../../../uploaded_images/{username}/xxx.jpg替换为/uploaded_images/{username}/xxx.jpg：

修改前端的路径处理代码：

const newImagePaths = response.data.imagePaths.map( path => {
    // 替换相对路径前缀为绝对路径
    const absolutePath = path.replace(/^.*uploaded_images/, '/uploaded_images');
    return absolutePath.replace(/\\/g, '/');
})

4. 验证重启 #

修改配置后，重启前端开发服务器，此时浏览器请求/uploaded_images/{username}/Cat03.jpg会被正确映射到父级目录的图片文件，404问题即可解决。

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