Repository navigation
How to add images from root? #850
Description
Activity
This changes the links but not the path to pictures. Am I doing something wrong?
Hmm, it’s maybe a bug
I confirm this is a bug. When you use
it doesn't work, but when you use
<img src='/img/img.png'></img>
it worksReacted by grantDEVHmm ..
this bug is fixed?Yes, now it works (with a workaround)
Reacted by Aarav Borthakur and AmirReacted by Marc-Antoine ManninghamHey @LemarkNova , Thanks for reply.
I am confused about the img tag compile result.
my markdown content is :
The docsify compiled result is :
<img src="/foldername/subfoldername/myimg.png" alt.../>
my expected result is :
<img src="/myimg.png" alt.../>
because my all static img file is just in a single folder.
Reacted by Sam WillisI found that this 「long path」is not caused by "marked" —— docsify compile markdown file by it,
It seems caused docsify ?
Something could be config ?
No finally it isn't fixed, I remember that I just use a workaround to use image in markdown:
I use../picturefolder/picture.jpg. So the real problem is that docsify doesn't compile correctly the markdown image. I don't know how you compile the markdown, but the problem is in the compilation of the markdown like in your previous comment.Does Docsify use the latest version of marked? But I just try with marked and it work.
Thanks for your help. I note the workaround way.
I do nothing about the compilation of markdown files, just do some steps from the official documentation.
I am not sure the version of marked, but the docsify I installed is the latest version.
No finally it isn't fixed, I remember that I just use a workaround to use image in markdown:
I use../picturefolder/picture.jpg. So the real problem is that docsify doesn't compile correctly the markdown image. I don't know how you compile the markdown, but the problem is in the compilation of the markdown like in your previous comment.Hi, could you please help me? #936
11 remaining items
hook.beforeEach(function(content) { return content.replace(new RegExp("/images", 'ig'), "../images"); })
or
hook.afterEach(function(html, next) { let reg = new RegExp(vm.config.basePath + ".*/images", 'ig'); html = html.replace(reg, vm.config.basePath + "images"); next(html); })
or
markdown: { // https://marked.js.org/#/USING_PRO.md#renderer renderer: { image: function(href, title) { return `<img src="${href}" data-origin="${href}" alt="${title}">` } } }
Reacted by Paul Hibbitts 🍁, Paul Meyer, Jankin Wei, 柚木 鉉, eliezer-cardoso, Pascal Knoth and Russell MatneyIn
core/render/compiler/image.jsimport { isAbsolutePath, isRelativePath, getPath, getParentPath } from '../../router/util'; ... if (!isAbsolutePath(href)) { url = isRelativePath(href) ? getPath(contentBase, getParentPath(router.getCurrentPath()), href) : getPath(contentBase, href); }In
core\router\util.jsexport const isRelativePath = cached(path => { return /^[^\/]/g.test(path); });Reacted by Junyu WeiIf your image is in GitHub repo, Use 'img src' instead of markdown and attach "?raw=true" to end of image's URL.
<img src="https://github.com/your/repo/blob/master/docs/images/img.png?raw=true"</img>I don't know why, but it works.
Reacted by mumlawskiI come up with the same problem, i think the most convinent way is to turn
![]()syntax into<img src="" alt="">.same issue here!
- added a commit that references this issue
on Feb 21, 2024 Bug acknowledged. Tracking with #1891.
- added a commit that references this issue
on Mar 2, 2024
For example, I have 2 folders in the root directory. There is a picture in the first folder (images).
The second folder (docs) contains the markdown file.
How do I insert an image into this markdown file that is located in the folder (images).
If I put it this way:
He tries to add it like this:
/docs/images/testimage.jpg