在vue项目中图片不显示原因分析及解决方案

可能的原因

1. 路径拼接问题：图片路径 /admin/sys-file/local/... 是相对路径，需要拼接基础URL才能正确访问

2. 服务器配置问题：/admin 开头的路径可能需要特殊权限或代理配置

3. 组件使用问题：同时使用了 el-image 和 ImgViewTable 两个组件，可能导致冲突

4. 图片资源不存在：服务器上该路径图片可能不存在或无法访问

5. 跨域问题：如果图片在不同域名下，可能需要配置CORS

<el-table-column:label="$t('h.AssetImage')"align="center"header-align="center"prop="picture"show-overflow-tooltip
><template slot-scope="scope"><el-image :src="getFullImageUrl(scope.row.picture)" style="height: 60px; width: auto;":preview-src-list="[getFullImageUrl(scope.row.picture)]"fit="contain"v-if="scope.row.picture"><div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div></el-image><span v-else>{{ $t('h.NoImage') }}</span></template>
</el-table-column>

下面的是js部分

getFullImageUrl(path) {if (!path) return '';// 确保路径不以斜杠开头，避免双斜杠const cleanPath = path.startsWith('/') ? path.substring(1) : path;return `${process.env.VUE_APP_BASE_API}/${cleanPath}`;
}

排除问题的方法如下：

1. 检查环境变量：确认 VUE_APP_BASE_API 是否正确配置

2. 网络检查：

   • 在浏览器开发者工具中检查图片请求的完整URL

   • 直接访问拼接后的URL看是否能获取图片

   • 检查网络请求的响应状态码

3. 服务器配置：确保服务器正确配置了静态资源访问权限和路由

如果问题仍然存在，请提供以下信息以便进一步排查：

• 浏览器开发者工具中图片请求的截图

• 环境变量 VUE_APP_BASE_API 的值

• 直接访问图片URL的结果