关于表格中显示放大镜功能不显示的问题,如何解决?

放大镜功能在el-table不显示图片,控制台报 :[Vue warn]: Component is missing template or render function. 警告,引入封禁库都是正确的

<template>
  <div>
    <!-- 筛选器 -->
    <el-form :model="filterForm" inline>
      <el-form-item label="关键词">
        <el-input
          v-model="filterForm.keyword"
          placeholder="请输入关键词"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="filterForm.category" placeholder="请选择分类">
          <el-option
            v-for="category in categories"
            :key="category.id"
            :value="category.id"
            :label="category.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="applyFilter">筛选</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->

    <el-table :data="filteredProducts" border>
      <el-table-column type="index" width="55" label="序列" />
      <el-table-column label="商品图片" width="200">
        <template v-slot="{ row }">
          <div style="width: 175px; height: 175px">
            <zoom-on-hover :img-normal="row.img1"> </zoom-on-hover>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="proname" label="商品描述"></el-table-column>
      <el-table-column prop="brand" label="品牌"></el-table-column>
      <el-table-column prop="sales" label="销售量"></el-table-column>
      <el-table-column prop="stock" label="库存"></el-table-column>
      <el-table-column prop="originprice" label="价格"></el-table-column>
      <!-- 其他列... -->
    </el-table>
  </div>
</template>
<script>
import api from "@/api";
import zoomOnHover from "@/utils/zoomOnHover/zoomOnHover.js";
import "@/utils/zoomOnHover/zoomOnHover.css";
export default {
  name: "ProIndexView",
  components: {
    //VueMagnifier,
    zoomOnHover,
  },
  data() {
    return {
      productData: [],
      product: null,
      filterForm: {
        // 筛选表单数据
        keyword: "",
        category: "",
      }, // 商品列表数据
      categories: [], // 商品分类数据
      filteredProducts: [],
      // 新增:筛选后的商品列表数据
    };
  },
  created() {
    api.pro.ProList().then((response) => {
      console.log(response);
      if (response.code == 200) {
        this.productData = response.data;
        this.applyFilter();
      }
    });
  },
  computed: {},
  methods: {
    applyFilter() {
      // 应用筛选条件,更新筛选后的商品列表数据
      const keyword = this.filterForm.keyword.trim();
      const category = this.filterForm.category;

      let filtered = this.productData;
      if (keyword !== "") {
        filtered = filtered.filter((product) =>
          product.proname.includes(keyword)
        );
      }
      if (category !== "") {
        filtered = filtered.filter((product) => product.total === category);
      }
      this.filteredProducts = filtered; // 将筛选结果赋值
    },
  },
};
</script>

<style></style>


img

img

你template 都有了 为啥不在辛苦辛苦 把 img组件加上