在el-table-column中的自定义div中引入背景图找不到，报404而img标签可以引入

在el-table-column中的自定义 div 中引入背景图报404错误，可能是因为图片路径不正确或者图片资源未正确引入。请检查一下图片路径是否正确，如果是相对路径，请确保图片资源与组件文件在同一目录下或者在正确的相对路径下。如果是绝对路径，请确保服务器上存在该图片资源。另外，你可以尝试使用开发者工具在 Network（网络）选项卡下查看该图片资源是否成功加载，以确定具体问题所在。如果 img 标签可以引入，可能是因为图片路径写法不同导致的问题。

相关问题

<template> <div> <el-card> <template> <!-- @click="showDialogHandler" --> <el-button type="primary" icon="el-icon-plus"> 添加 </el-button> </template> <el-table :data="trademarks.records"> <el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="品牌名称" prop="tmName"></el-table-column> <el-table-column label="品牌LOGO" > <template v-slot="{ row }"> <img style="width: 100px" :src='row.logoUrl'/> </template> </el-table-column> <el-table-column label="操作"> <el-button type="primary" >修改</el-button> <el-button type="danger" >删除</el-button> </el-table-column> </el-table> <el-pagination style="margin-top: 20px" :page-sizes="[5, 10, 15, 20]" layout="prev,pager,next,jumper,->,sizes,total" > </el-pagination> </el-card> </div> </template> <script> import { getBaseTrademark, getBaseTrademarkbyPage, saveBaseTrademark, updateBaseTrademark, deleteBaseTrademark, } from "@/api/trademark"; export default { name: "ProductTrademark", data() { return { trademarks: "", }; }, methods: { async getList() { let result = await getBaseTrademarkbyPage(); console.log(result); this.trademarks = result.data; }, }, mounted() { this.getList(); }, }; </script> <style lang="less" scoped> </style>

这是一段 Vue.js 的代码，用于展示商标管理的列表和分页功能。其中使用了 Element UI 组件库，通过调用相关接口，从后端获取商标数据并展示出来。如果需要添加、修改或删除商标信息，还需要调用相应的接口进行操作。

<commonTable :columns="column" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange"> <el-table-column slot="seqNumber" label="序号" :index="(page.page - 1) * page.size + 1" type="index" align="center" width="64"></el-table-column> <el-table-column slot="actionBar" label="Depth图片" > <div class="item-box"> <img class="pic" :src="baseUrl + 'mgr/file/showImgByPath?imgPath=' + tableData.depthPic" /> </div> </el-table-column> </commonTable>为什么说我的tableData.depthPic无数据

根据您提供的代码，您的表格列中的depthPic数据是从tableData对象中获取的。如果您发现depthPic没有数据，可能有以下几个原因：

1. 数据未正确加载：请确保tableData对象中的depthPic属性有正确的数据。您可以通过打印或调试来检查tableData对象的内容。

2. 数据源错误：请确认baseUrl和imgPath的路径是正确的，可以尝试在浏览器中直接访问该路径来验证是否能正确显示图片。

3. 数据命名错误：请检查您的数据命名是否正确，确保depthPic属性在tableData对象中是正确的属性名。

如果您仍然无法确定问题所在，建议您逐步排查代码，查看各个步骤是否正常运行，并确保数据源和路径设置正确。