docsifyjs
Docsify does not preserve alias when importing an image
Bug Report
Steps to reproduce
This page https://github.com/hamishwillee/mavlink-devguide/blob/demo_for_but/en/guide/serialization.md displays four images.
- The first two display an image in an /assets/ folder using absolute and relative paths.
- The second two display the same image in the same folder.
1.
2.
3.
4.
<img src="packet_mavlink_v2.jpg" title="MAVLink v2 packet">
If I display this page using an alias none of the images are displayed;
'/en/(.*)':
'https://raw.githubusercontent.com/hamishwillee/mavlink-devguide/docsify_test/en/$1'
YOu can see why here - the assets folder is not found - either it can't find the assets folder, or it is looking in the root, or it is looking in the right folder locally, and not on the aliased site.
I think it should search the relative path of the alias to construct the URL.
What is current behaviour
If you load a markdown file using an alias images listed in that file cannot be imported.
What is the expected behaviour
If you import a file via an alias its images should be displayed
Other relevant information
I think this is the same thing reported in https://github.com/docsifyjs/docsify/issues/1436#issuecomment-737107674
The had a horrible hack to hard code what site they are on into the URL. I'd be OK with that if you could get the information for your current context dynamically maybe, but I'd still hope this bug would be fixed.
-
[ x] Bug does still occur when all/other plugins are disabled?
-
Your OS: Windows 11
-
Node.js version: v16.15.0
-
npm/yarn version: yarn 1.22.5
-
Browser version: Latest Firefox and Chrome
-
Docsify version: 4.x
-
Docsify plugins: None
Please create a reproducible sandbox
[
](https://codesandbox.io/s/late-dawn-tvrd7w?file=/README.md)
- click the link to display a test page that loads images
Mention the docsify version in which this bug was not present (if any)
All
Note, you can work around this with a hook, a bit like:
let my_dir_path = vm.route.file.split('/');
my_dir_path.pop();
let fixcontent = content.replace(/\!\[(.*?)\]\((.*?)\)/g,
(match, title, path) => {
let linkrootpath=my_dir_path.slice();
let relpath = path;
if (relpath.startsWith('../')) {
while (relpath.startsWith('../')) {
relpath = relpath.slice(3);
linkrootpath.pop();
}
linkrootpath = linkrootpath.join('/');
linkrootpath = `${linkrootpath}/${relpath}`;
let imagestring = `<img src="${linkrootpath}" title="${title}" />`;
return imagestring;
}
else {
return match;
}
}
);
But I think it is reasonable for a user to assume that docsify will do this for relative links on the remote content. And of course someone who is better at javascript could write a better method.
@hamishwillee We're currently trying to integrate remote documentation and preserve aliasing in our project. This would be a great feature to have.
@impr0t Yes it would. This project is odd - truly innovative, and yet a few core things don't work, and never get fixed. The other one is relative/absolute paths - which break for the sidebar.
PS, I haven't finished, but if you're interested in seeing some of the things I've tried there is a branch here: https://github.com/hamishwillee/multidocsify_test/tree/px4test_docsify that renders to this https://hamishwillee.github.io/multidocsify_test/#/main/en/
Same requirement - multiple remote sources accessed via aliasing - with translation and versioning.
This uses https://evilmartians.com/chronicles/easy-multi-language-multi-version-documentation-with-docsify-git-and-github-actions to handle dynamically updating the sidebar links and hooks for the images.
Note that the only changes I needed to make for this to work with my old gitbook build was to make the SUMMARY.md links to start with /