代码片段求助,图片右上角增加——复制图片地址 按钮

跟下图类似,在图片右上角菜单按钮的左边,添加个复制图片地址按钮。或者说把原本要点进菜单才能操作的 复制地址 按钮浮现在右上角。

不知道有没有用的补充

  • 跟图片菜单一样,鼠标滑过去才显示
  • 网络图片角标,我是关闭的

imageWlaCiFN.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    26096 引用 • 108348 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10025 引用 • 45573 回帖 • 71 关注

相关帖子

被采纳的回答
  • wilsons 1

    刚才的改了下,但不知道你复制后的最终文本是否是完整链接还是去掉前缀后缀啥的,你先试试效果。

    // 图片复地址放到外层右上角 (()=>{ let isOn = false; document.addEventListener('mouseover', (e)=>{ const img = e.target.closest('[data-type="img"]'); if(!img) return; if(isOn) return; isOn = true; setTimeout(()=>isOn=false, 100); if(img.querySelector('.cst-copy-png-link')) return; const action = img.querySelector('.protyle-action'); if(!action) return; const actionIcon = img.querySelector('.protyle-action .protyle-icon'); if(actionIcon) { actionIcon.style.borderTopLeftRadius = '0'; actionIcon.style.borderBottomLeftRadius = '0'; } const copyPngHtml = `<span class="protyle-icon protyle-icon--only protyle-custom cst-copy-png-link" style="border-top-right-radius:0;border-bottom-right-radius:0"><svg class="svg"><use xlink:href="#iconImage"></use></svg></span>`; action.insertAdjacentHTML('afterbegin', copyPngHtml); const copyPngBtn = img.querySelector('.cst-copy-png-link'); copyPngBtn.addEventListener('click', (e) => { e.stopPropagation(); copyPNGByLink(img.querySelector('img')?.src||''); }); }); function copyPNGByLink(link) { if(!link) return; navigator.clipboard.writeText(link); } })();

    比如这样的链接,要下面哪种?
    http://127.0.0.1:62266/assets/image-20250512163220-2pwagz7.png?url=xxxxx

    1. 只要 /assets/image-20250512163220-2pwagz7.png 部分
    2. 只要 http://127.0.0.1:62266/assets/image-20250512163220-2pwagz7.png 部分
    3. 只要 /assets/image-20250512163220-2pwagz7.png?url=xxxxx 部分
    4. 完整链接都要

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons 1 2 评论

    刚才的改了下,但不知道你复制后的最终文本是否是完整链接还是去掉前缀后缀啥的,你先试试效果。

    // 图片复地址放到外层右上角 (()=>{ let isOn = false; document.addEventListener('mouseover', (e)=>{ const img = e.target.closest('[data-type="img"]'); if(!img) return; if(isOn) return; isOn = true; setTimeout(()=>isOn=false, 100); if(img.querySelector('.cst-copy-png-link')) return; const action = img.querySelector('.protyle-action'); if(!action) return; const actionIcon = img.querySelector('.protyle-action .protyle-icon'); if(actionIcon) { actionIcon.style.borderTopLeftRadius = '0'; actionIcon.style.borderBottomLeftRadius = '0'; } const copyPngHtml = `<span class="protyle-icon protyle-icon--only protyle-custom cst-copy-png-link" style="border-top-right-radius:0;border-bottom-right-radius:0"><svg class="svg"><use xlink:href="#iconImage"></use></svg></span>`; action.insertAdjacentHTML('afterbegin', copyPngHtml); const copyPngBtn = img.querySelector('.cst-copy-png-link'); copyPngBtn.addEventListener('click', (e) => { e.stopPropagation(); copyPNGByLink(img.querySelector('img')?.src||''); }); }); function copyPNGByLink(link) { if(!link) return; navigator.clipboard.writeText(link); } })();

    比如这样的链接,要下面哪种?
    http://127.0.0.1:62266/assets/image-20250512163220-2pwagz7.png?url=xxxxx

    1. 只要 /assets/image-20250512163220-2pwagz7.png 部分
    2. 只要 http://127.0.0.1:62266/assets/image-20250512163220-2pwagz7.png 部分
    3. 只要 /assets/image-20250512163220-2pwagz7.png?url=xxxxx 部分
    4. 完整链接都要
    2 操作
    wilsons 在 2025-05-12 19:58:59 更新了该回帖
    wilsons 在 2025-05-12 18:58:35 更新了该回帖
    4,整个地址框的完整链接都要(图床地址),未来不排除有其他需求。目前对于 4 运行正常。
    8V9q7V
    @8V9q7V 更新下,修复了手机版 bug
    wilsons 1

推荐标签 标签

  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3201 引用 • 8216 回帖 • 2 关注
  • AWS
    11 引用 • 28 回帖 • 8 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1794 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 2 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 18 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    32 引用 • 108 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 403 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 248 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 367 关注
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 242 回帖
  • V2Ray
    1 引用 • 15 回帖 • 3 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖 • 1 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 394 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 196 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1443 引用 • 10082 回帖 • 498 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    108 引用 • 153 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 37 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 615 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    589 引用 • 3528 回帖