Unable to preview resources (images, css...) outside of the workspace 401 Unauthorized

[challengemkr20]

Hello,

• I am unable to preview images which are outside of the project folder.

• However, I am able to preview images which exist in the same folder, or a subfolder of a project.

• The closest issue I could find which had a similar bug is https://github.com/asciidoctor/asciidoctor-vscode/issues/819, but this is slightly different.

• I am using Windows.

• I created two folders on the c:\ drive of my computer. c:\a and c:\aa

  • Each folder contains an image{a/aa}.adoc and an image{a/aa}.png.
  • The images are copies of each other.
  • I simply try to reference the image{a/aa}.png from the other folder's image{a/aa}.adoc file.

• This screenshot was taken from the c:\aa project's imageaa.adoc, I tried to add the c:\a\image.adoc file.

• I am able to use VSCode to render PDF and HTML files which include the images. All four figures are included in the output files.

• Failed Attempts:

  • Using relative paths ../a or ../aa does not work.
  • Using absolute paths with upper case letters does not work C:/a/.
  • Using absolute paths with lower case letters does not work c:/a/.
  • Using either forward or backslashes has no impact.

• I get Failed to load resource: the server responded with status of 401 (Unauthorized) or Not allowed to load local resource from the Webview Developer Tools. Sorry I cannot figure out how to copy out of this window.

• I tried each option in the AsciiDoc: Manage Preview Security Settings, reloaded, and had the same result.

Background

• I use Antora, but I do not use Antora's /images folder support. I did not use it for this test and I disabled it in my projects for debugging.
• I must use an Artifactory instance for hosting images. I cannot store binary files on our Git server.
• I will rapidly iterate on images locally, and then upload the completed images to Artifactory.
• I want to use asciidoctor attributes defined in the antora.yml file to point to either my local hard drive or the remote HTTPS Artifactory directory. I simply want to define both attributes and comment out one or the other as needed. Remote image::http:// urls are working with preview, but the local folder path is not, which is what led me to creating this issue.

Here is the example in the above screenshot. I didn't update the title before taking the screenshot.

= C:/aa/images.adoc

.aa image in aa folder
image::imageaa.png[]

:imagesdir: ../a/

imagesdir: {imagesdir}

.a image from aa folder
image::imagea.png[]

:imagesdir: C:/a/
imagesdir: {imagesdir}

.a image absolute path
image::imagea.png[]

:imagesdir: c:/a/
imagesdir: {imagesdir}

.a image absolute path
image::imagea.png[]

Windows and VS Code version

Microsoft Windows [Version 10.0.19045.3930]
(c) Microsoft Corporation. All rights reserved.

C:\aa>code --version
1.86.2
903b1e9d8990623e3d7da1df3d33db3e42d80eda
x64

asciidoctor-vscode version

C:\aa>code --list-extensions --show-versions
asciidoctor.asciidoctor-vscode@3.2.0

[ggrossetie]

I think this is the same issue as https://github.com/asciidoctor/asciidoctor-vscode/issues/747 (upstream issue: https://github.com/microsoft/vscode/issues/187697). VS Code WebView does not allow to load assets outside of the workspace folder.

[challengemkr20]

Ah!

I did test using a symbolic link. It did work, but this is not a very easy solution to implement on Windows PCs. It requires opening a command prompt with administrator permissions and the user must type a lot of commands.

[ggrossetie]

The only workaround I can think of would be to add a new setting to add additional local resource roots on the webview.

[challengemkr20]

Please forgive my ignorance, but how does one implement that? I tried googling, but search terms did not lead me to any promising result. Do you mean this something in the asciidoctor-vscode source code to expose a new setting, or is it configured in the settings.json or similar file?

[ggrossetie]

Do you mean this something in the asciidoctor-vscode source code to expose a new setting, or is it configured in the settings.json or similar file?

Sorry for the confusion! Yes, that would be a new feature in the asciidoctor-vscode extension.

Could you please do the same test but using the Markdown extension? This extension is/was heavily based on the Markdown extension codebase. I want to make sure that we didn't forget to include an important bit.

[challengemkr20]

I confirmed the error exists with markdown as well.

# Image A

Inside same folder (image a)
![Image](./imagea.png)

Relative path (image aa)
![Image](../aa/imageaa.png)

Absolute Path (image aa)
![Image](c:/aa/imageaa.png)

[man-chi]

as a workaround before antora is fully supported, I managed to preview images in vscode-asciidoctor web preview by doing the following setting in vscode web preview:

• vscode-asciidoc extension > settings > asciidoc >preview : asciidoctor attributes
• Edit in settings.json "asciidoc.preview.asciidoctorAttributes": { "imagesdir":"../images/" }

[challengemkr20]

@man-chi you are a wonderful human being!

That works so well! It also simplifies my entire workflow!!!!!

[man-chi]

@challengemkr20 you are welcome. glad that I could contribute back to the open-source community.

also, I have created a feature request ticket to make the "imagesdir":"../images/" by default, if the Antora setting is enabled. https://github.com/asciidoctor/asciidoctor-vscode/issues/855

I hope I can contribute more.

[challengemkr20]

@man-chi Do you have a similar attribute work-around for Visual Studio Code to show previews when using Kroki AND Antora with source files stored in the /partials or /examples directory?

Antora, Antora-Assembler (Asciidoctor-PDF) correctly follow the include:: syntax, but not VSC.

It seems I can only include my diagrams in-line in VSC.

.HTML Output
[graphviz]
....
include::partial$kroki-graphviz-html.dot[]
....

My .dot file is

digraph foo {
  node [style=rounded]
  HTML [shape=box]
  node2 [fillcolor=yellow, style="rounded,filled", shape=diamond]
  node3 [shape=record, label="{ a | b | c }"]

  HTML -> node2 -> node3
}

I tried adding a few more attributes, but I receive "Error 400: Error: stdin>: syntax error in line 1 near 'Unresolved' (exit code 1).

"asciidoc.preview.asciidoctorAttributes": {"imagesdir":"../images/",
    "partial": "../partials/",
    "partial$": "../partials/",
    "example": "../examples/",
    "example$": "../examples/",
}