是否可以在GitHub markdown中为图像添加边框？

Question

我需要在GitHub README.md文件中为图像添加边框。这就是图像应该嵌入的方式：

![GitHub Logo](/images/logo.png)

我试图用图表包装图像：

|--------------------------------|
|![GitHub Logo](/images/logo.png)|

但是无法创建没有标题的表。

我还尝试将图片包含为html标记：

<img src="/images/logo.png" style="border: 1px solid black" />

但没有成功。有什么方法可以做到这一点吗？

Answer 1

它的hacky并不总是漂亮，但用<kbd>标签包围图像。

之前

<img src="https://i.stack.imgur.com/CtiyS.png">

之后

<kbd>
  <img src="https://i.stack.imgur.com/CtiyS.png">
</kbd>

它呈现如下：

围绕降价图像语法并不适用于某些降价实现。例如，在GitHub上，以下内容只会呈现为奇怪的文字：< / p>

<kbd>![alt-text](https://example.com/image.png)</kbd>

相反，它需要将图像嵌入为HTML <img>标记：

<kbd><img src="https://example.com/image.png" /></kbd>

Answer 2

在StackExchange网站上，我喜欢使用＆＃34;引用＆＃34;为此目的标记>。

例如：

> [![screenshot][1]][1]

  [1]: https://i.stack.imgur.com/CtiyS.png

渲染如下：

  

Answer 3

您可以使用'use strict'; var AWS = require('aws-sdk'); var ses = new AWS.SES(); var reCAPTCHA = require('recaptcha2') var fs = require('fs'); var Handlebars = require('handlebars'); module.exports.sendemail = (event, context, callback) => { // parse the data that was sent from API Gateway var eventData = JSON.parse(event.body); // Prepare the recaptcha connection to Google var recaptcha = new reCAPTCHA({ siteKey: process.env.RECAPTCHA_KEY, secretKey: process.env.RECAPTCHA_SECRET }) // Validate the recaptcha value recaptcha.validate(eventData.recaptcha) .then(function(){ // validated ok console.log("reCAPTCHA Valid") // Read the HTML template from the package root fs.readFile('./contact/email_template.html', function (err, emailHtmlTemplate) { if (err) { console.log("Unable to load HTML Template"); throw err; } // Read the TEXT template from the package root fs.readFile('./contact/email_template.txt', function (err, emailTextTemplate) { if (err) { console.log("Unable to load TEXT Template"); throw err; } // Gather data to be injected to the templates var emailData = { "websiteaddress": process.env.WEBSITEADDRESS, "websitename": process.env.WEBSITENAME, "content": null, "email": process.env.EMAIL_TO, "event": eventData }; // Use Handlebars to compile the template and inject values into the title (used in subject and body of email) var templateTitle = Handlebars.compile(process.env.EMAIL_TITLE); var titleText = templateTitle(emailData); console.log(titleText); // Add title to the values object emailData.title = titleText; // Use Handlebars to compile email plaintext body var templateText = Handlebars.compile(emailTextTemplate.toString()); var bodyText = templateText(emailData); console.log(bodyText); // Use Handlebars to compile email html body var templateHtml = Handlebars.compile(emailHtmlTemplate.toString()); var bodyHtml = templateHtml(emailData); console.log(bodyHtml); // Prepare the SES payload     var params = {         Destination: {              ToAddresses: [                  process.env.EMAIL_TO             ]         },         Message: {             Body: {                 Text: {                      Data: bodyText,                      Charset: 'UTF-8'                  }, Html: { Data: bodyHtml },             },             Subject: {                 Data: titleText,                 Charset: 'UTF-8'             }          },         Source: process.env.EMAIL_FROM     } console.log(JSON.stringify(params,null,4)); // Send SES Email     ses.sendEmail(params, function(err,data){ if(err) { console.log(err,err.stack); // error // Handle SES send errors var response = { statusCode: 500, headers: { "Access-Control-Allow-Origin" : "*", "Access-Control-Allow-Credentials" : true }, body: JSON.stringify({"message":"Error: Unable to Send Message"}) } callback(null, response); } else { console.log(data); // success // SES send was successful var response = { statusCode: 200, headers: { "Access-Control-Allow-Origin" : "*", "Access-Control-Allow-Credentials" : true }, body: JSON.stringify({"message":"Message Sent"}) } callback(null, response); } }); }); //end of load text template }); //end of load html template }) .catch(function(errorCodes){ // invalid recaptcha console.log("reCAPTCHA Not Valid") // translate error codes to human readable text console.log(recaptcha.translateErrors(errorCodes)); // send a fail message with cors headers back to the UI var response = { statusCode: 500, headers: { "Access-Control-Allow-Origin" : "*", "Access-Control-Allow-Credentials" : true }, body: JSON.stringify({"message":"Error: Invalid Recaptcha"}) } callback(null, response); }); }; 标记创建没有标题的表格。

<table>

Answer 4

我在Gitlab上执行此操作的方式是使用如下表：

| ![Alt name of image](/path-to-image.png) |
| ------ |

Answer 5

另一种方法是使用表格的第一个单元格。

代码：

|![pictureAliasName](pathOfPicture/pictureName.png)|
-

-字符在代码中很重要。

您可以看到结果here。

Answer 6

另一种方法是在图像编辑工具中自己提供边框并上传。

Answer 7

我经常这样。也许需要换行。

# Added at 2020/09/14

|![image_alt](image_path)
|-

[label_text]
|-
!...

|!...a|!...b|!...c
|-|-|-

||
-|
!...

# with Background color

||
-|
||
!...a

Before | After
-|-
!...a | !...b

|||||
-|-|-|-
!...a | !...b | !...c | !...d

kbd是个好主意，所以我会尝试的。