Images appear as broken in preview pane in AsciiDoc 3.1.8 #819

RoxvilleRooster · 2023-11-10T21:36:24Z

Original discussion is in https://asciidoctor.zulipchat.com/#narrow/stream/406819-users.2Fasciidoctor-vscode/topic/images.20missing.20in.20preview

Please provide details about:

In the preview pane, view the referenced images as I did with AsciiDoc 3.1.5 and previous releases
When I use AsciiDoc 3.1.6 and AsciiDoc 3.1.7, in the preview pane, referenced images show appear as broken
In the preview pane, referenced images should be rendered correctly (as they were with AsciiDoc 3.1.5 and previous releases)

Please share relevant sample content. Or better yet, provide a link to a minimal reproducible example.

vscode details:

Version: 1.84.2 (user setup)
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:51:52.184Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.19045

I am specifying no extension properties for asciidoctor (I want to stick to the defaults for this troubleshooting).

Here is the preview pane when I used AsciiDoc 3.1.7

Here is the preview pane when I used AsciiDoc 3.1.5

Attached is very simple project to illustrate:
simple_project_image_preview_issue.zip

This is the text of test.adoc

= Image preview test
:imagesdir: ../images

[qanda]
Is the use of the doc attribute `+:imagesdir: ../images+` a problem?::
This usage was not a problem in the Asciidoctor extension (i.e., AsciiDoc 3.1.5 or previous). 
Does the image resolve in the preview pane when you use the Asciidoctor extension?::
If you use AsciiDoc 3.1.6 or 3.1.7, I do not expect that it will.
If you use AsciiDoc 3.1.5 or earlier, I expect that it will.

.This is a test image - does it resolve in the preview pane?
image::datamart_transaction_data_flow.jpg[]

Install AsciiDoc 3.1.7.
Does the image appear as expected (i.e., not broken) in the preview pane? I expect that the image will appear as broken.

Install AsciiDoc 3.1.5 and reload.
Does the image appear as expected (i.e., not broken) in the preview pane? I expect that the image will appear rendered correctly in the preview pane.

The text was updated successfully, but these errors were encountered:

mojavelinux · 2023-11-10T21:56:17Z

When I try it using AsciiDoc 3.1.7, I see the image in the preview pane.

ggrossetie · 2023-11-10T22:16:29Z

Please note that you don't need to use :imagesdir: ../images if Antora support is enabled.

ggrossetie · 2023-11-10T22:22:36Z

When I try it using AsciiDoc 3.1.7, I see the image in the preview pane.

Same here (on Windows) 🤔

cunka · 2023-11-13T08:17:58Z

I'm on the new AsciiDoc 3.1.8 - Windows10 - and I can see the image in the preview pane.

I also see the original bug was posted where VSCode is using its native preview, I tested that as well and it all came out fine.

RoxvilleRooster · 2023-11-13T13:47:04Z

@ggrossetie
Here is the output from the console if the Developer Tools".

This is what I get with AsciiDoc 3.1.5

WARN Via 'product.json#extensionEnabledApiProposals' extension 'ms-dotnettools.dotnet-interactive-vscode' wants API proposal 'languageConfigurationAutoClosingPairs' but that proposal DOES NOT EXIST. Likely, the proposal has been finalized (check 'vscode.d.ts') or was abandoned.
workbench.desktop.main.js:sourcemap:645  INFO [perf] Render performance baseline is 83ms
workbench.desktop.main.js:sourcemap:1184 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
mountTo @ workbench.desktop.main.js:sourcemap:1184
M @ workbench.desktop.main.js:sourcemap:1149
claim @ workbench.desktop.main.js:sourcemap:1149
Db @ workbench.desktop.main.js:sourcemap:2629
workbench.desktop.main.js:sourcemap:1184 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
mountTo @ workbench.desktop.main.js:sourcemap:1184
M @ workbench.desktop.main.js:sourcemap:1149
claim @ workbench.desktop.main.js:sourcemap:1149
ib @ workbench.desktop.main.js:sourcemap:1580
setInput @ workbench.desktop.main.js:sourcemap:1580

This is what I see with AsciiDoc 3.1.8

 WARN Via 'product.json#extensionEnabledApiProposals' extension 'ms-dotnettools.dotnet-interactive-vscode' wants API proposal 'languageConfigurationAutoClosingPairs' but that proposal DOES NOT EXIST. Likely, the proposal has been finalized (check 'vscode.d.ts') or was abandoned.
workbench.desktop.main.js:sourcemap:645  INFO [perf] Render performance baseline is 92ms
workbench.desktop.main.js:sourcemap:1184 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
mountTo @ workbench.desktop.main.js:sourcemap:1184
2workbench.desktop.main.js:sourcemap:645  WARN Settings pattern "application.*" doesn't match any settings
workbench.desktop.main.js:sourcemap:1184 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
mountTo @ workbench.desktop.main.js:sourcemap:1184
workbench.desktop.main.js:sourcemap:1184 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
mountTo @ workbench.desktop.main.js:sourcemap:1184
workbench.desktop.main.js:sourcemap:1184 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
mountTo @ workbench.desktop.main.js:sourcemap:1184
M @ workbench.desktop.main.js:sourcemap:1149
claim @ workbench.desktop.main.js:sourcemap:1149
ib @ workbench.desktop.main.js:sourcemap:1580
setInput @ workbench.desktop.main.js:sourcemap:1580
datamart_transaction_data_flow.jpg:1     Failed to load resource: the server responded with a status of 401 ()

That Failed to load resource: the server responded with a status of 401 () indicates an error on my end (that did not exist in 3.1.5).

kodermho · 2023-11-13T14:55:24Z

I have what appears to be the same issue. Mine appears to be related to case in the path. I have images in same folder as .adoc file
c:\a\test.adoc works fine
c:\A\test.adoc image rendering is broken

AsciiDoc v3.1.8

Version: 1.84.2 (user setup)
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:51:52.184Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.22621

ggrossetie · 2023-11-13T16:16:38Z

I have what appears to be the same issue. Mine appears to be related to case in the path. I have images in same folder as .adoc file
c:\a\test.adoc works fine
c:\A\test.adoc image rendering is broken

Are you using an absolute path? Could you please share the content of test.adoc ?

ggrossetie · 2023-11-13T16:19:55Z

@RoxvilleRooster looks like a workspace permission issue. Could you please open the network tab and inspect the request that returns a 401.

The URI should be something like:

https://file+.vscode-resource.vscode-cdn.net/path/to/datamart_transaction_data_flow.jpg

Also, do you open your AsciiDoc file in a workspace?

kodermho · 2023-11-13T17:13:32Z

I have what appears to be the same issue. Mine appears to be related to case in the path. I have images in same folder as .adoc file
c:\a\test.adoc works fine
c:\A\test.adoc image rendering is broken

Are you using an absolute path? Could you please share the content of test.adoc ?

Entire adoc

image::test_image.png[]

System:

* Version: 1.84.2 (user setup)
* Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
* Date: 2023-11-09T10:51:52.184Z
* Electron: 25.9.2
* ElectronBuildId: 24603566
* Chromium: 114.0.5735.289
* Node.js: 18.15.0
* V8: 11.4.183.29-electron.0
* OS: Windows_NT x64 10.0.22621

kodermho · 2023-11-13T17:33:15Z

in a folder
Request URL: https://file+.vscode-resource.vscode-cdn.net/c%3A/a/test_image.png
return 200

in A folder
Request URL: https://file+.vscode-resource.vscode-cdn.net/c%3A/A/test_image.png
return 401(from service worker)

Also, do you open your AsciiDoc file in a workspace?

Not sure. I right click (empty area) in folder > Open with Code

kodermho · 2023-11-13T17:38:07Z

In Console for A I get the error below. In a there is no error.

index.html?id=ad7083…2F%2Fvscode-app:999 
 GET https://file+.vscode-resource.vscode-cdn.net/c%3A/A/test_image.png 401
(anonymous)	@	index.html?id=ad7083…2F%2Fvscode-app:999
setTimeout (async)		
onFrameLoaded	@	index.html?id=ad7083…2F%2Fvscode-app:997
(anonymous)	@	index.html?id=ad7083…F%2Fvscode-app:102

RoxvilleRooster · 2023-11-13T19:01:18Z

@RoxvilleRooster looks like a workspace permission issue. Could you please open the network tab and inspect the request that returns a 401.

The URI should be something like:
https://file+.vscode-resource.vscode-cdn.net/path/to/datamart_transaction_data_flow.jpg
Also, do you open your AsciiDoc file in a workspace?

I am using GitHub Desktop and VSCode, So when I edit the docs in a repo, I assume that means I am operating in the workspace. If I save extension settings to the workspace, the settings.json file gets saved in the repo/workspace in .vscode/settings.json).
It is interesting this is may be a workspace permissions issue.
I have no AsciiDoc extension settings specified for the workspace - but maybe that is the problem?

I am not 100% sure that I am doing the right thing but in the Network tab in Developer Tools, I see this (which does not appear new info):

WARN Via 'product.json#extensionEnabledApiProposals' extension 'ms-dotnettools.dotnet-interactive-vscode' wants API proposal 'languageConfigurationAutoClosingPairs' but that proposal DOES NOT EXIST. Likely, the proposal has been finalized (check 'vscode.d.ts') or was abandoned.
log.ts:421  INFO [perf] Render performance baseline is 104ms
webviewElement.ts:512 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
mountTo @ webviewElement.ts:512
datamart_transaction_data_flow.jpg:1     Failed to load resource: the server responded with a status of 401 ()

ggrossetie · 2023-11-14T12:15:08Z

@RoxvilleRooster could you please take a screenshot of your network tab?

Here's an example where you can see the request that loads the web-console.png image:

@kodermho As far as I know, Windows is case insensitive. Do you use WSL? How do you open your test.adoc from either the folder A or a?

kodermho · 2023-11-14T13:53:51Z

As far as I know, Windows is case insensitive.

I agree. I not sure how to test that but if I put "c:\a" into run it will open c:\A folder

...Do you use WSL?...

Yes, I use it.

... How do you open your test.adoc from either the folder A or a?

I have windows 11.

open a windows explorere window
navigate to c:\A
right click in empty space in folder to get contextual menu
click "open with code"
VScode opens
in the side menu it has sheets of paper with a folded corner icon that open explorer
1. explorer shows the 2 files in the folder

I am renaming c:\A->a->A->...

lutopastialis · 2023-11-14T14:11:19Z

I'm also encountering this issue. By playing around I found that it does have something to do from where I start vscode.

code --version
1.84.2
x64

code --list-extensions --show-versions
asciidoctor.asciidoctor-vscode@3.1.8

I usually launch vscode from the command line in the repository root directory: code ., which then causes this issue.
However, if I launch vscode from the start menu and then manually open the folder, I don't encounter this issue and images are loaded correctly (request OK with 200).

I've also completely reset my entire vscode/asciidoc tool chain during troubleshooting this (uninstalled and deleted all remaining folders, reinstalled). I have the latest stable versions from official sources of all tools involved (vscode user install, asciidoc extension, ruby and asciidoctor gem). Except Windows, unfortunately (Windows 10 Enterprise, 22H2, build 19045.3570).

gem list
asciidoctor (2.0.20)

choco list
Chocolatey v2.2.2
ruby 3.1.3.1

Hope this helps.

kodermho · 2023-11-14T16:29:36Z

Opening just the file in vscode renders image in preview

Edited prcoess from above

open a windows explorere window
navigate to c:\A
right click ~~in empty space in folder~~ on test.adoc to get contextual menu
click "open with code"
VScode opens
Ctrl + Shift + V to view preview works

ggrossetie · 2023-11-16T11:45:47Z

@lutopastialis I was able to reproduce this issue by launching VS code from the command line. Interestingly, the Markdown extension is using the exact same request:

Markdown extension

Request URL: https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/gross/Documents/A/mountain.jpeg
Request Method: GET
Status Code: 200 (from service worker)
Referrer Policy: strict-origin-when-cross-origin

AsciiDoc extension

Request URL: https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/gross/Documents/A/mountain.jpeg
Request Method: GET
Status Code: 401 (from service worker)
Referrer Policy: strict-origin-when-cross-origin

It seems like a limitation/bug in VS code... you should open a new issue upstream: https://github.com/microsoft/vscode

ggrossetie · 2023-11-16T12:44:17Z

Found a similar issue: microsoft/vscode#197103

lutopastialis · 2023-11-16T13:56:07Z

@ggrossetie you beat me to it :) Thank you for adding your comment in the vscode issue thread #197103, I appreciate it. I seem to be among only a few collegues in my team who open vscode almost always from the command line (Powershell 7 and the latest stable Windows Terminal). I've posted this info internally, which really helps as we're working on some very large asciidoc files with lots of images.
Let's observe the upstream issue for a bit and decide whether this needs a separate thread.
Thanks again!

ggrossetie · 2023-11-18T12:21:27Z

It seems that VS Code normalizes some paths (on Windows) so I would strongly recommend to use lowercase names to avoid issues.

ggrossetie · 2023-11-18T12:24:18Z

Oooh! It seems that we are normalizing the path in:

asciidoctor-vscode/src/features/preview.ts

Lines 400 to 410 in d0df68a

 const folder = getWorkspaceFolder(resource) 

 if (folder) { 

 const workspaceRoots = getWorkspaceFolders()?.map((folder) => folder.uri) 

 if (workspaceRoots) { 

 baseRoots.push(...workspaceRoots) 

 } 

 } else { 

 baseRoots.push(uri.Utils.dirname(resource)) 

 } 

 return baseRoots

ggrossetie · 2023-11-19T18:59:42Z

I think I finally found the root cause, thanks all for providing reproduction cases! The 401 error was a bit misleading and it was even more weird that in some cases it worked (that's because VS code is using a cache).

Anyway, I will add tests, merge #825, update the CHANGELOG and release 3.1.9 ☺️

Previously, we were applying toLowerCase on the whole path causing the WebView to return 401 on resources (such as images)

RoxvilleRooster added the 🐞 bug label Nov 10, 2023

ggrossetie added the ⬜ windows Issues related to Microsoft's Windows label Nov 14, 2023

ggrossetie changed the title ~~Images appear as broken in preview pane in AsciiDoc 3.1.6 and AsciiDoc 3.1.7~~ Images appear as broken in preview pane in AsciiDoc 3.1.8 Nov 16, 2023

ggrossetie mentioned this issue Nov 16, 2023

"Failed to load resource" with 401 on a file that exists and should be accessible microsoft/vscode#197103

Closed

ggrossetie mentioned this issue Nov 18, 2023

resolves #819 fix drive letter normalization #825

Merged

1 task

ggrossetie closed this as completed in #825 Nov 19, 2023

ggrossetie added a commit that referenced this issue Nov 19, 2023

resolves #819 fix drive letter normalization (#825)

4d86a4c

Previously, we were applying toLowerCase on the whole path causing the WebView to return 401 on resources (such as images)

challengemkr20 mentioned this issue Feb 21, 2024

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

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Images appear as broken in preview pane in AsciiDoc 3.1.8 #819

Images appear as broken in preview pane in AsciiDoc 3.1.8 #819

RoxvilleRooster commented Nov 10, 2023 •

edited

Loading

mojavelinux commented Nov 10, 2023

ggrossetie commented Nov 10, 2023

ggrossetie commented Nov 10, 2023

cunka commented Nov 13, 2023 •

edited

Loading

RoxvilleRooster commented Nov 13, 2023

kodermho commented Nov 13, 2023

ggrossetie commented Nov 13, 2023

ggrossetie commented Nov 13, 2023

kodermho commented Nov 13, 2023 •

edited

Loading

kodermho commented Nov 13, 2023 •

edited

Loading

kodermho commented Nov 13, 2023 •

edited by ggrossetie

Loading

RoxvilleRooster commented Nov 13, 2023 •

edited

Loading

ggrossetie commented Nov 14, 2023

kodermho commented Nov 14, 2023 •

edited

Loading

lutopastialis commented Nov 14, 2023 •

edited

Loading

kodermho commented Nov 14, 2023 •

edited

Loading

ggrossetie commented Nov 16, 2023

ggrossetie commented Nov 16, 2023

lutopastialis commented Nov 16, 2023

ggrossetie commented Nov 18, 2023

ggrossetie commented Nov 18, 2023

ggrossetie commented Nov 19, 2023

Images appear as broken in preview pane in AsciiDoc 3.1.8 #819

Images appear as broken in preview pane in AsciiDoc 3.1.8 #819

Comments

RoxvilleRooster commented Nov 10, 2023 • edited Loading

mojavelinux commented Nov 10, 2023

ggrossetie commented Nov 10, 2023

ggrossetie commented Nov 10, 2023

cunka commented Nov 13, 2023 • edited Loading

RoxvilleRooster commented Nov 13, 2023

kodermho commented Nov 13, 2023

ggrossetie commented Nov 13, 2023

ggrossetie commented Nov 13, 2023

kodermho commented Nov 13, 2023 • edited Loading

kodermho commented Nov 13, 2023 • edited Loading

kodermho commented Nov 13, 2023 • edited by ggrossetie Loading

RoxvilleRooster commented Nov 13, 2023 • edited Loading

ggrossetie commented Nov 14, 2023

kodermho commented Nov 14, 2023 • edited Loading

lutopastialis commented Nov 14, 2023 • edited Loading

kodermho commented Nov 14, 2023 • edited Loading

ggrossetie commented Nov 16, 2023

Markdown extension

AsciiDoc extension

ggrossetie commented Nov 16, 2023

lutopastialis commented Nov 16, 2023

ggrossetie commented Nov 18, 2023

ggrossetie commented Nov 18, 2023

ggrossetie commented Nov 19, 2023

RoxvilleRooster commented Nov 10, 2023 •

edited

Loading

cunka commented Nov 13, 2023 •

edited

Loading

kodermho commented Nov 13, 2023 •

edited

Loading

kodermho commented Nov 13, 2023 •

edited

Loading

kodermho commented Nov 13, 2023 •

edited by ggrossetie

Loading

RoxvilleRooster commented Nov 13, 2023 •

edited

Loading

kodermho commented Nov 14, 2023 •

edited

Loading

lutopastialis commented Nov 14, 2023 •

edited

Loading

kodermho commented Nov 14, 2023 •

edited

Loading