[Vue warn]: Unknown custom element: ＜viewer＞ - did you register the component correctly? For recursi

Project scenario:

提示：这里简述项目相关背景：
The front-end page details page is loaded successfully, but a red warning message appears on the console. The content of the message is as follows:

[Vue warn]: Unknown custom element: <viewer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <OutFile> at src/views/repair/outFile.vue
       <D2LayoutHeaderAside> at src/layout/header-aside/layout.vue
         <App> at src/App.vue
        

   <Root>

---

Problem Description

提示：这里描述项目中遇到的问题：

As shown below:

View the details of the red warning log, as shown in the screenshot below:

---

Cause Analysis:

Tip: Fill in the analysis of the problem here:

[Vue warn]: Unknown custom element: - did you register the component correctly? For
recursive components, make sure to provide the “name” option.
found in …

According to the error log information, we can locate that it is related to the component. The page is as follows:

  <viewer>
                    <img
                      v-for="(srcImg,pics) in picImageList" :key="pics" :src="srcImg"
                      style="display: inline-block;width: calc(20% - 10px);cursor: pointer;margin: 5px;"
                    />
                  </viewer> ```

---

solution:

Tip: Fill in the specific solution to this problem here:

According to the error log information, we can locate that it is related to the component, so

1. First check whether the component is registered in the usage page.
2. Whether the registration method of the component is correct
. 3. Pay attention to the order of introducing the component and instantiating the component when using the component
. 4. Pay attention to whether the written name is consistent.

Reason: The plug-in is not installed in this project

1、安装  <viewer>  插件
npm install v-viewer --save

2、在  main.js  文件中配置
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

3、引入组件
<script>
  import viewer from ''  //引入组件
</script>

4、在使用页面中注册组件
  components: {
        viewer  //注册组件
  },

This time, because the node version used conflicts with the install viewer, other components are used instead of this component to achieve the desired function.

<el-image
          style="width: 100px; height: 100px"
          v-for="(srcImg, pics) in item.picImageList"
          :key="pics"
          crossorigin="anonymous"
          :src="srcImg"
          fit="contain"
          :preview-src-list="picImageList"
        ></el-image>

This time the problem is solved~~~