当我在README文件中使用HTML标签时,为什么图像无法在VS Code扩展库中显示?

时间:2018-10-07 07:30:22

标签: visual-studio-code vscode-extensions

我想在我的Awesome Snippets Visual Studio代码扩展库中显示一个演示gif。为了更改图像大小,我必须使用HTML标签而不是README中的常规Markdown语法,但它似乎无法正常工作。那么有什么问题吗,我该如何以某种有用的方式来实现呢?

HTML标记代码在这里:

import React, { Component } from "react";

class MetricsReport extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.generateReport = this.generateReport.bind(this);
  }
  generateReport() {
    this.props.generateReport("Hello World!");
  }
  render() {
    return (
      <div>
        <button onClick={this.generateReport}>Generate Report</button>
      </div>
    );
  }
}
export default MetricsReport;

2 个答案:

答案 0 :(得分:0)

图片只能来自受信任的网站(例如Github)。我花了几轮时间来确保图像能在市场上展示。我最终得到的是通往Github的完整路径。例如:

<p style="float:right;">
  <img src="https://raw.githubusercontent.com/mike-lischke/vscode-antlr4/master/misc/antlr-logo.png" alt="logo" width="64">
</p>

确保您使用的是图片的直接链接,而不是普通的Web链接(它将返回网页,而不是图片)。

答案 1 :(得分:0)

我也有这个问题。

  1. 确保回购是公开的。
  2. 进入您的.gif所在的存储库。
  3. .gif应该正在播放。
  4. 右键单击.gif,然后选择复制图片地址。
  5. 粘贴到您的README.md

全部完成了:)