Image not showing in study options menu.

[krmanik]

Reproduction Steps

1. Open AnkiDroid
2. Select select deck

Expected Result

It should show images.

Actual Result

It is not showing image.

In Anki Desktop it is showing images. But in AnkiDroid showing small square.

AnkiDesktop

AnkiDroid

Debug info

AnkiDroid 2.12beta5

Research

Enter an [x] character to confirm the points below:

• [ x ] I have read the support page and am reporting a bug or enhancement request specific to AnkiDroid
• [ x ] I have checked the manual and the FAQ and could not find a solution to my issue
• [ x ] I have searched for similar existing issues here and on the user forum
• [ x ] (Optional) I have confirmed the issue is not resolved in the latest alpha release (instructions)

[mikehardy]

For those that aren't sure where this is (it is a screen not seen often in some AnkiDroid configurations) this will show up if you tap the new/due etc numbers on the right side of the deck list screen for a deck, or if you are in "tablet" mode where the main activity goes split screen, at which point it's visible on the right side

[david-allison]

This isn't currently a WebView, we'll need to switch implementations to handle any complex cases.

https://github.com/ankidroid/Anki-Android/blob/017cb41d04e55b284f5e11410c50f63d2b368d38/AnkiDroid/src/main/java/com/ichi2/anki/StudyOptionsFragment.java#L92

[github-actions[bot]]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[Ekagra]

I am working on it

[Ekagra]

It's not showing any square on that screen, can anyone help me with that?

[krmanik]

This contain sample deck. Import it in AnkiDroid and click on far right (new, learn, review number) on deck name. To view the source.

1. Long press sample deck name
2. Click option
3. View deck description In Anki Desktop the description window use qt webview to display html. So, in case of AnkiDroid also android webview will be used.

Extract sample.apkg, import and view sample.zip

AnkiDroid

AnkiDesktop

[Ekagra]

@infinyte7 thanks for the input

[abanoub-asaad]

I would like to work on this issue.

[mikehardy]

@Abanoub-Asaad go for it!

[Ghanem21]

is this issue is free now? what I had understad that I have to replace the square(which is a placeholder) with the image selected with the user

[krmanik]

@Ghanem21 You can create PR for this. You have to check AnkiDesktop also, how it behaves? There are limited HTML tags that work on AnkiDesktop. Earlier webview considered but now it can be implemented without webview.

[akp660]

I can help with this by solving the image preview issues.

[dae]

IIRC recent desktop versions don't support this either.

[ShadyMedic]

@dae said:

IIRC recent desktop versions don't support this either.

They do, just tested this with Version ⁨2.1.66 (70506aeb)⁩ Python 3.9.15 Qt 6.5.2 PyQt 6.5.2.

Can you please reopen this issue? This would really deserve to be solved on AnkiDroid as well, because quite a few cool features depend on it. For example, I use it to notify my users whether an update/patch of my decks is available:

Also, this has the "Keep open" tag, so I don't understand why it was closed.

Thanks.

[dae]

Sorry, I remembered incorrectly. Images are disabled if you have markdown enabled, but that may change in the future.

[ShadyMedic]

Thank you for your answer any reopening this.

Please, don't disable this feature in the desktop version as well. It makes no sense, when remote images are allowed on cards and removing the support for them on cards as well (to make the "privacy and tracing" concerns valid) would make a lot of people mad.

There's a way to go around this restriction (for this "update notification" feature) by adding a card to the deck, which will load the remote image with the current update status and then prompt the user to bury it, but it just makes it harder for everyone (plus, let's be honest, most Anki users are causals who don't even know what "Bury card" even means).

[wyy511511]

I would like to say, it's an excellent and important feature, and @ShadyMedic has ingeniously utilized it. I definitely need this feature!

Desktop

Version ⁨2.1.65 (aa9a734f)⁩ Python 3.9.15 Qt 6.5.0 PyQt 6.5.0

deck's info page

works great on deck's info page

card view

The image resources are not rendered and displayed in the card view. I haven't used the devtool to check yet.

AnkiDroid

AnkiDroid Version = 2.18alpha6-debug (a854e93b5f34b0ea167806787375c2d7ab43205c) Backend Version = 0.1.34-anki23.12.1 (23.12.1 1a1d4d5419c6b57ef3baf99c9d2d9cf85d36ae0a)

deck's info page

How to set up a test deck with url img?

The UI and sequence shown in the gif below have become deprecated.

Type chrome://inspect in your browser

Resource Loading Policy: CORS?

Path Issues: base64? downloaded locally and then loaded into the WebView from a local path?

Permission Issues: user need give permissions to folder/resources.

WebView Configuration Issues: WebView configuration that prohibit image loading. I guess Anki may have implemented such settings, but I'm not sure and I haven't dived into more details.

Image Format,Network Issues etc. This does not apply to this issue.

[ShadyMedic]

@wyy511511 Hi there, thank you for your support.

The reason why you don't see the image in the card on desktop is because Anki parses the card fields on order to display exactly what you typed in (which is desirable most of the time). In order to make the HTML code render an image, you need to paste it into the code editor (you can enable it by clicking the <> icon or by pressing Ctrl+Shift+X).

About deck description in AnkiDroid, I looked into the code some time ago and although I don't umderstand mobile app development all that much, it seemed to me like the deck description is not actually being rendered by WebView and there is an parser function in the code somewhere, which reformats certain HTML elements to better fit the app and override user-defined CSS (for example, by removing borders and background colors). Remote images are disabled at this step as well, I think.

[Arthur-Milchior]

@wyy511511 Thank you very much for the reproduction step. Do you think you could export this deck and share it (you need to zip it first, otherwise github do not accept the file) so other people can save time here.

[wyy511511]

This isn't currently a WebView, we'll need to switch implementations to handle any complex cases.

https://github.com/ankidroid/Anki-Android/blob/017cb41d04e55b284f5e11410c50f63d2b368d38/AnkiDroid/src/main/java/com/ichi2/anki/StudyOptionsFragment.java#L92

Hi @david-allison,

In my commit 9a70640, I've tried that switching to a WebView can solve this problem. However, based on your response, I'm curious whether you'd prefer solving it by customizing the TextView and using Html.ImageGetter instead. If AnkiDroid is okay with switching to WebView, I think the related test code also needs to be modified.

TextView related test code

https://github.com/wyy511511/Anki-Android/blob/23b507a2e89b4b6c4ff9cc4f76e0db1f47c08fae/AnkiDroid/src/main/java/com/ichi2/anki/StudyOptionsFragment.kt#L690-L698

https://github.com/wyy511511/Anki-Android/blob/bd9b7013fdfff1c1149622599e865ea2f728f0ed/AnkiDroid/src/test/java/com/ichi2/anki/StudyOptionsFragmentTest.kt#L24-L88

I'm not familiar with the testing part yet, so I'm hesitant to make changes directly. If needed, I'd be happy to work on the testing part.

[wyy511511]

Test deck apkg AnkiDroid Issues#6669.apkg.zip

[david-allison]

We should aim to follow Anki Desktop's current implementation.

First investigate what this is, especially the security procedures taken.

This may have changed in the past 4 years

Regarding tests, feel free to leave @NeedsTest in appropriate locations, we're only at around 40% coverage, but we want to improve over time. If you can recreate the "logic" of the tests, then that is encouraged. If they're no longer relevant then they can be removed

[wyy511511]

I reviewed Anki Desktop's implementation , where the original QPlainTextEdit() string is wrapped in a

tag within the _desc() function(this includes a branch to support markdown). The generated HTML string is then integrated into the Overview page's content and displayed in a WebView (i.e., self.web) through the self.web.stdHtml method.

I'll update tests.

I am checking

• We need to consider the user privacy aspects of allowing the WebView to access the internet (even just external images), and especially loading javascript - we need to see what Anki Desktop does here and question whether we should emulate it. It would allow a newly downloaded deck to phone home before the deck has been open.
• We need to handle the WebView onRenderProcessGone and associated nastiness. Originally posted by @david-allison in https://github.com/ankidroid/Anki-Android/issues/8184#issuecomment-798844042

[wyy511511]

Future versions of Anki will block JS from the deck descriptions - the fact that it's currently allowed was just an oversight. Originally posted by @dae in https://github.com/ankidroid/Anki-Android/issues/8184#issuecomment-799007081

I tested Anki Desktop still allow js.

[asp616848]

Is the issue resolved now? I should be able to help with my android development knowledge.

[ShadyMedic]

No, the issue still persists. It would be awesome if you could fix it.

7. 8. 2024 7:21:57 Abhijeet Shashwat @.***>:

Is the issue resolved now? I should be able to help with my android development knowledge.

— Reply to this email directly, view it on GitHub[https://github.com/ankidroid/Anki-Android/issues/6669#issuecomment-2272640156], or unsubscribe[https://github.com/notifications/unsubscribe-auth/AEXY767EVNMQVN5NEWHLO5DZQGVHHAVCNFSM4OYF73J2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMRXGI3DIMBRGU3A]. You are receiving this because you were mentioned. [Sledovací obrázek][https://github.com/notifications/beacon/AEXY764TAWWU4Q2JQ6I3NLLZQGVHHA5CNFSM4OYF73J2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOQ523ZHA.gif]

[wyy511511]

No, the issue still persists. It would be awesome if you could fix it. 7. 8. 2024 7:21:57 Abhijeet Shashwat @.***>: … Is the issue resolved now? I should be able to help with my android development knowledge. — Reply to this email directly, view it on GitHub[#6669 (comment)], or unsubscribe[https://github.com/notifications/unsubscribe-auth/AEXY767EVNMQVN5NEWHLO5DZQGVHHAVCNFSM4OYF73J2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMRXGI3DIMBRGU3A]. You are receiving this because you were mentioned. [Sledovací obrázek][https://github.com/notifications/beacon/AEXY764TAWWU4Q2JQ6I3NLLZQGVHHA5CNFSM4OYF73J2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOQ523ZHA.gif]

I believe the point is that webview will lead to MANY potential SECURITY issues, so it is not suitable for modifying the existing implementation that only supports textfield.

I implemented the requested feature in my clone repo ( https://github.com/wyy511511/Anki-Android ) Because the security considerations mentioned in the historical discussions, I did not submitted a PR request @asp616848

[ShadyMedic]

That doesn't make sense though, since external images are already allowed on the cards and as far as I know, JavaScript works as well.

And I am not aware of any security incidend that this has caused. So if this was allowed in deck descriptions as well (that many users don't even see because they go straight to browsing the cards), it wouldn't worsen the security of the app in any way.

7. 8. 2024 9:34:11 Yaoyao @.***>:

I believe the point is that webview will lead to MANY potential SECURITY issues, so it is not suitable for modifying the existing implementation that only supports textfield.

— Reply to this email directly, view it on GitHub[https://github.com/ankidroid/Anki-Android/issues/6669#issuecomment-2272814343], or unsubscribe[https://github.com/notifications/unsubscribe-auth/AEXY76Z7HKR6HWDUYWR73ODZQHEXDAVCNFSM4OYF73J2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMRXGI4DCNBTGQZQ]. You are receiving this because you were mentioned.

[shkshreyas]

please assign me this issue

[mikehardy]

@shkshreyas if no one else is working on it - and it doesn't seem like anyone is - then make sure you clearly understand the issue and post a PR that addresses it