Vue.js中图片src存在但无法显示问题求助（附代码）

以下是针对你遇到的问题的具体排查方向和解决办法：

1. 检查图片路径格式 #

API返回的task.pic可能是相对路径（比如/uploads/xxx.jpg），前端直接使用相对路径无法正确定位到后端的静态资源。

• 解决：拼接后端服务的基础URL，比如后端地址是http://localhost:8000，则修改图片的src绑定：

  <img :src="`http://localhost:8000${task.pic}`" alt="No Image" title="Order Now" />
  

• 验证：把拼接后的完整地址复制到浏览器地址栏，确认能直接打开图片。

2. 排查跨域问题 #

浏览器可能会限制跨域加载图片资源，即使API数据能正常返回。

• 检查：打开浏览器控制台的「Network」面板，查看图片请求的状态码（比如403、CORS相关错误）。
• 解决：
  • 后端配置CORS，允许前端域名访问图片资源；
  • 前端通过Vue代理转发图片请求，在vue.config.js中添加：

    module.exports = {
      devServer: {
        proxy: {
          '/uploads': { // 匹配图片路径的前缀
            target: 'http://localhost:8000',
            changeOrigin: true
          }
        }
      }
    }
    

    之后图片src直接使用相对路径即可： :src="task.pic"

3. 确认图片资源有效性 #

即使路径存在，也可能是后端的图片文件本身损坏或路径配置错误。

• 操作：复制API返回的task.pic值（或拼接后的完整路径）到浏览器地址栏，直接访问。如果无法打开，说明后端的静态资源映射或文件存储有问题，需要排查后端配置。

4. 验证数据结构与响应式 #

• 修正初始值：你的tasks初始值是['']（包含空字符串的数组），建议改为空数组tasks: []，避免渲染时出现异常；
• 打印数据验证：在this.tasks = response.data后添加console.log(this.tasks)，确认每个task对象的pic字段确实存在且值正确。

修改后的示例代码 #

<template>
    <div class="tasks_container">
        <div class="tasks_content">
            <h1>Tasks</h1>
            <ul class="tasks_list">
                <li v-for="task in tasks" :key="task.id">
                    <h2>{{ task.name }}</h2>
                    <img :src="`http://localhost:8000${task.pic}`" alt="No Image" title="Order Now" />
                    <p></p>
                    <button></button>
                    <button>Delete</button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tasks: []
        }
    },
    methods: {
        async getData() {
            try {
                const response = await this.$http.get('http://localhost:8000/read_retrieve/');
                this.tasks = response.data;
                console.log('任务数据：', this.tasks);
            } catch (error) {
                console.error('获取数据失败：', error);
            }
        },
    },
    created() {
        this.getData();
    }
}
</script>

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