Image size ?

[Smallinger]

Hey is it possible to set the image size ?
like, ![Logo](/img/logo.svg '200x100') or 'width:100'

[charlyie]

Or use an implementation already supported by some Markdown editors :

![Logo](/img/logo.svg =200x100)
OR
![Logo](/img/logo.svg =200x)

It would be very useful :)

See : https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown

[Smallinger]

oh, thx.

[charlyie]

Hi Smallinger,

The message was not for you ! The issue is still open for me, as both methods (yours and mine) aren't supported by docsify !

[thomas0612]

@QingWei-Li 尝试了阁下给出的参数 并无任何效果
图片引用了在线的本地的 都尝试了无效

[QingWei-Li]

@thomas0612 https://docsify.js.org/#/helpers?id=image-resizing

[thomas0612]

请问引用的js以及css需要写哪个版本号

[QingWei-Li]

@thomas0612 4.7.0

[thomas0612]

更改之后目前遇到俩个问题需要解答

1.从4.4.1升级到4.7.0之后所有文档中的图片无法显示
2.是否在index中引用以下俩个文件即可？还是说需要额外引入什么文件，还请指导

<link rel="stylesheet" href="//unpkg.com/docsify@4.7.0/lib/themes/vue.css">
<script src="//unpkg.com/docsify@4.7.0/lib/docsify.min.js"></script>

[QingWei-Li]

@thomas0612

https://github.com/docsifyjs/docsify/releases/tag/v4.6.8

4.6 有 break change，图片路径为改成根据当前文件路径计算，不再是基于 basePath

[thomas0612]

ok，问题已经解决 ，非常感谢 @QingWei-Li
不知道有没有加按百分显示图片大小的参数？

[QingWei-Li]

@thomas0612

![](xxx.png ':size=100%')

[lamuertepeluda]

Guys this is broken. Percentage never work.

The regex should be something like

\:size=(\d+(\%|px|em|rem)(x\d+(\%|px|em|rem))?)

Please try it yourself at https://regex101.com/ (set ECMAScript Engine on the right and paste)

My Title :size=30%
My Title :size=30%x20%
My Title :size=300px
My Title :size=30pxx20px
My Title size=300x200
My Title size=300pxx200

Only the first 4 get a match

While the regex at

docsify/src/core/render/compiler.js

Line 15 in 78f5564

export function getAndRemoveConfig(str = '') {

fails, e.g

const { config } = getAndRemoveConfig('My Title :size=30%')

config.size = 30
config.str = "My Title%"

While I expected size to be 30%

[lamuertepeluda]

Easiest of all, to get the size you could:

const sizeTitleRegexp = /\:size=(\d+(\%|px|em|rem)(x\d+(\%|px|em|rem))?)/;

const testStrings = [
  'My Title :size=30%',
  'My Title :size=30%x20%',
  'My Title :size=300px',
  'My Title :size=30pxx20px',
  'My Title size=300x200',
  'My Title size=300pxx200'
];

function getAndRemoveConfig(titleStr) {
  const [title, size] = titleStr.split(sizeTitleRegexp);
  const sizeRegexp = /(\d+(\%|px|em|rem))/g;

  return {
    str: titleStr,
    config: {
      title: title.trim(),
      size: typeof size === 'string' ? size.match(sizeRegexp) : null
    }
  };
}

testStrings.map(getAndRemoveConfig);

and you get:

[
  {
    str: 'My Title :size=30%',
    config: { title: 'My Title', size: [Array] }
  },
  {
    str: 'My Title :size=30%x20%',
    config: { title: 'My Title', size: [Array] }
  },
  {
    str: 'My Title :size=300px',
    config: { title: 'My Title', size: [Array] }
  },
  {
    str: 'My Title :size=30pxx20px',
    config: { title: 'My Title', size: [Array] }
  },
  {
    str: 'My Title size=300x200',
    config: { title: 'My Title size=300x200', size: null }
  },
  {
    str: 'My Title size=300pxx200',
    config: { title: 'My Title size=300pxx200', size: null }
  }
]

Note that sizeRegexp is global and therefore it needs to be re-instantiated to avoid the problems describede here

To me this looks cleaner and easier to understand. You get the very same interface you are already using.

@QingWei-Li what do you think about it?

[Frankstar]

this issues is closed, but you are right @lamuertepeluda - its "broken"

[relaxbao]

请问怎么在index.html 设置图片大小呢？因为我选择了隐藏侧边栏，所以不能用![logo](./imgs/icon.jpg ':size=15%')

[Jarrettluo]

在index.html中设置logo方法，logo: 'media/logo.svg height=100px'