h5项目中 在钉钉分享时 分享卡片icon图标如何设置

于 2024-05-05 16:28:41 发布
阅读量412 收藏
点赞数 8
文章标签： html5 javascript css3 css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51702278/article/details/138468762
版权

h5项目中 在钉钉分享时 分享卡片icon图标如何设置
一般设置图标时是<link rel="icon" href="/public/favicon.ico" />
但是在钉钉和企业微信等分享时 并不能显示图标
这时候应该使用
    <meta property="og:title" content="项目名称" />
    <meta property="og:image" content="img/logo.png" />
    <meta name="og:image" contect="img/logo.png" />
    <meta name="og:title" content="项目名称" />

前端老曹
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
link标签的使用 && 浏览器标题图标修改
一个憨憨的前端之路
08-11 2546
link link标签定义文档与外部资源的关系。 link标签最常见的用途是链接样式表。 tip: 仅包含属性，只能放于head // index.html 浏览器图标修改 <link rel="icon" type="image/x-icon" href="./logo_.png"> 常用属性 href 外链地址 rel 规定当前文档与被链接文档之间的关系 rel="icon" 图标,格式可为PNG\GIF\JPEG，尺寸一般为16x16、24x24、36x36等 rel="shor
OA仿钉钉考勤H5源代码
05-24
【OA仿钉钉考勤H5源代码】是一款基于Web技术实现的企业级考勤管理系统，其设计灵感来源于知名的办公软件——钉钉。该系统主要利用HTML5、CSS3和JavaScript等前端技术，结合后端服务，实现了类似钉钉的考勤功能，包括...
HTML rel=“icon“
allway2的博客
06-17 3499
标签上的属性值指定当前页面的网页图标或网站图标。此设置仅适用于标记。A在元素上。 此链接引用页面或站点的图标。 现场试用rel属性定义当前页面和链接资源之间的关系。该值定义了在视觉上代表网站的网页图标或网站图标。图标 URL 在href属性中指定。 只有一个元素接受rel属性上的图标值。网站图标称为favicon。网站图标用于网站选项卡，并用作触摸图标、移动快捷方式图标和应用程序图标。最初，网站图标是格式化的图像，但今天也接受图像。这些是图标的标准尺寸：...
HTML基础笔记（1-12）
mengyun303的专栏
02-24 256
HTML基础笔记（1-10） 一、标题栏的图标设置有5种方法： 1、在网站的根目录下放一张favicon.ico的图标文件。浏览器会自动显示在标题栏中。 2、使用ico图标作用标题栏图标，用link标签引入。 <link rel="icon" type="image/x-icon" href=""/> 可以使用工具将其它图片生成ico图标。图标一般设置为16X16. 3、使用jpg图片作用标题栏图标，用link标签引入。 &lt...
网页的linke rel="icon"详解 favicon深究
热门推荐
tfy1332的专栏
04-03 1万+
字词转换是中文维基的一项自动转换，目的是通过计算机程序自动消除繁简、地区词等不同用字模式的差异，以达到阅读方便。字词转换包括全局转换和手动转换，本说明所使用的标题转换和全文转换技术，都属于手动转换。 如果您想对我们的字词转换系统提出一些改进建议，或者提交应用面更广的转换（中文维基百科全站乃至MediaWiki软件），或者报告转换系统的错误，请前往Wikipedia:字词转换请求或候选发表您的
H5页面 微信卡片分享 好友 朋友圈； 前后端代码
07-25
H5页面 微信卡片分享 好友 朋友圈； 前后端代码 H5页面 微信卡片分享 好友 朋友圈； 前后端代码 文档地址： https://blog.csdn.net/nicepainkiller/article/details/131918628 文档地址： ...
H5移动端页面设计心得分享
03-03
去年JDC出了不少优秀的武媚娘…不，H5呢，大家都很拼，同时当然也积累了一些经验和教训，今天结合咱们的实战案例，从字体，排版，动效，音效，适配性，想法这几个方面好好聊一聊关于H5的设计，希望对同学们有帮助。...
通过link rel=＂icon＂可以实现部分浏览器的动画图标效果
xu_ya_fei的专栏
07-31 4401
通过link rel=＂icon＂可以实现部分浏览器的动画图标效果
link标签实现网页标题小图标
KLW75
04-13 1270
1、在这个网站把你的图片转换成ico图标转换网站点击这里 2、把你生成的ico图标下载到本地，放到你的文件夹中。 3、使用link标签 <link rel="icon "href="图片的位置"> 这里的href中放对应图片的位置。 问题，为什么要转换 答：favicon必须是16*16或者32*32的，必须是8位色或者24位色的，转换一下就符合标准了。 问题：图片的格式都可以是什么？ 答：png ico gif 这三种都可以。 ...
html网页logo属性link,html元素link标签rel="icon"添加网站favicon.ico图标
weixin_36297266的博客
06-04 5759
html元素中的link标签除了可以引用插入CSS样式表文件之外，还可以通过link标签设置网站的favicon.icon图标。什么是favicon.icon图标？网站favicon.ico图标，是显示在浏览器的选项卡标题栏、收藏夹等位置，是展示网站独有的缩略logo图标，目前主要的浏览器都支持favicon.ico图标。favicon.ico图标制作方法我们可以直接在线制作，现在网络上存在不少i...
设置网页图标的方法
程序员的博客
02-08 4899
设置网页图标标签: 代码: &lt;link rel="icon" href="favicon.ico"&gt; 1.该标签应该放到head标签中 2.需要使用link标签设置网页图标 注意: 1. 网页图标的格式一般都是以ico为后缀名的图片 2. 网页图标也可以是png或者jpg格式,但是不推荐使用 3. 网页图标一般会在根目录下存放. ...
php <link rel="icon",rel="alternate"等属性全解
weixin_34297395的博客
03-20 503
我在看Wordpress主题源码的时候，发现这样一行代码：大概意思我是了解的，可看到有好几条这样的标签，有好几个不是很清楚。于是搜索了一下这方面的信息定义了。原来rel只是标签的一个属性，定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素，它仅包含属性。且只能存在于 head 部分，不过它可出现任何次数。在 html 中， 标签没有结束标签。在 XHTML 中， 标签必须被...
vue项目动态设置浏览器icon
wzp20092009的博客
09-28 1606
代码很简单，获取 <link> 标签中 rel 相关设置的值为 icon 的标签元素，将 icon 地址的值赋给该标签的属性 href。 // 比如某个路径 browerIconUrl document.querySelectAll("link[rel*='icon']").forEach(item => { item.href = browserIconUrl; }) ...
link[rel=“icon“]
淡淡的芦苇的博客
04-12 1068
设置站点信息 setSiteInfo() { const url = window.location.host; siteApi(url).then((res) => { const resData = res || {}; this.siteInfo.siteLogo = resData.frontEndLogo; this.siteInfo.siteName = resData.frontEndName; this.siteInfo.siteDefaultN
利用＜link＞设置网页标题小图标
我的博客
01-03 596
【代码】利用设置网页标题小图标。
uniapp H5端显示favicon.ico
sunluyi的博客
11-29 1708
uniapp自定义template.h5.html 下边这个例子来自官网的自定义模板。 在根目录添加template.h5.html文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <lin
h5分享钉钉卡片、链接自动识别卡片
code
08-28 4389
分享官方文档 引入SDK <scriptsrc="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script> 定义方法： //钉钉分享 share() { dd.ready(function() { dd.biz.navigation.setRight({ ..
微信小程序公众号h5分享卡片
最新发布
02-01
开发者可以在小程序的代码中，通过调用相关API来设置分享标题、描述和图片等信息，当用户点击分享按钮时，系统会自动根据设置生成分享卡片供用户分享到朋友圈、好友等渠道。 而在微信公众号的H5页面中，我们可以...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值