[前端] [Vue] el-popover标签下的img图片消失、无法实现缩略图功能

03-15 阅读 0评论

我的代码：

这是我的代码，无论如何也不起作用，尝试了对popover的src属性赋值，尝试了img的各种属性和style设置，都无用。

$[前端] [Vue] el-popover标签下的img图片消失、无法实现缩略图功能,[前端] [Vue] el-popover标签下的img图片消失、无法实现缩略图功能,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,我们,设置,前端,第1张$

（图片来源网络，侵删）

解决方案：

经过一段时间查询和摸索发现，加入slot="reference"即可

以下是好奇宝宝时间

这个slot是什么：

简单来说，slot是插槽，父组件在调用子组件的时候，可以往插槽里替换掉自己的代码

举例如下：

  
    我是子组件
    
      默认内容1
    
    
      默认内容2
    
    
      默认内容3
    
  


  我是 header：{{ message }}
    
    我没有名字：{{ message }}
    
      我是 footer：{{ message }}

结果如下：（水印点了取消竟然还没去掉）

[前端] [Vue] el-popover标签下的img图片消失、无法实现缩略图功能

详细的关于slot的讲解可以查看：

https://juejin.cn/post/7197970175479611451

原因分析：

那么我们回到popover上，为什么引用了slot=“reference”就能实现原本空白的缩略图呢？看源码：

  
    
      
        
        {{ content }}

这里很明显起了一个名为reference的slot插槽，而上面的content插槽则是popover内的content属性，那个是用于写文本的（以下为 elementUI 官网的举例：）

  
    hover 激活

最后我将自己的代码进行了修改，并最终成功！

（图片来源网络，侵删）

知其所以然是真爽啊

参考网址：

搜索到的正解：https://blog.csdn.net/weixin_42396196/article/details/105769929

关于popover的slot为什么是reference：https://blog.csdn.net/qq_42760090/article/details/112072820

关于slot的详细讲解：https://juejin.cn/post/7197970175479611451

相关阅读：

1、【菜狗学前端】在原生微信小程序使用腾讯地图API接口

2、清华大学出版，前端必看书籍之一，看完React提升80％！

3、前端双语实现方案（VUE版）

4、前端篇~~~html（4）

5、开源复刻GPT-4o - Moshi；自动定位和解决软件开发中的问题；ComfyUI中使用MimicMotion；自动生成React前端代码

免责声明

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

[前端] [Vue] el-popover标签下的img图片消失、无法实现缩略图功能

我的代码：

解决方案：

这个slot是什么：

原因分析：

参考网址：

相关阅读

远程怎么连接云服务器设备(远程怎么连接云服务器设备上)

包含怎么查看非专用主机游戏的名字是什么的词条

怎么帮人在网上异地备案(怎么帮人在网上异地备案社保)

怎么把网页弄上域名(怎么把网址添加到网页上方)

发表评论取消回复

还没有评论，来说两句吧...

目录[+]