epub html conversion loss of images/media when importing to SuperMemo

[ghost]

In pandoc 2.11.1 and beyond when using command:
pandoc -s --extract-media=lcml_files --resource-path=lcml_files lcml.epub -o lcml.html
and importing it to SuperMemo there are no images visible in SuperMemo(using SM to read epub files).

Not sure what/how to report issue further because of lack of experience so if anybody could suggest what further details to provide I would be most grateful.

In imported html where images are working:

<STYLE disabled>CODE {
&#9;WHITE-SPACE: pre-wrap; 9: 
}
SPAN.smallcaps {
&#9;FONT-VARIANT: small-caps; 9: 
}
SPAN.underline {
&#9;TEXT-DECORATION: underline; 9: 
}
DIV.column {
&#9;WIDTH: 50%; VERTICAL-ALIGN: top; DISPLAY: inline-block; 9: 
}
DIV.hanging-indent {
&#9;MARGIN-LEFT: 1.5em; TEXT-INDENT: -1.5em; 9: 
}
UL.task-list {
&#9;LIST-STYLE-TYPE: none; 9: 
}
</STYLE>

In invalid(2.11.1 pandoc) imported html:

<STYLE disabled>HTML {
&#9;FONT-SIZE: 20px; FONT-FAMILY: Georgia, serif; COLOR: #1a1a1a; LINE-HEIGHT: 1.5; BACKGROUND-COLOR: #fdfdfd; 9: 
}
BODY {
&#9;WORD-WRAP: break-word; MAX-WIDTH: 36em; PADDING-BOTTOM: 50px; PADDING-TOP: 50px; PADDING-LEFT: 50px; MARGIN: 0px auto; PADDING-RIGHT: 50px; 9: ; hyphens: auto; text-rendering: optimizeLegibility; font-kerning: normal
}

@media Unknown    
{
BODY {
&#9;FONT-SIZE: 0.9em; PADDING-BOTTOM: 1em; PADDING-TOP: 1em; PADDING-LEFT: 1em; PADDING-RIGHT: 1em; 9: 
}

}

@media Print    
{
BODY {
&#9;FONT-SIZE: 12pt; COLOR: black; BACKGROUND-COLOR: transparent; 9: 
}
P {
&#9;ORPHANS: 3; WIDOWS: 3; 9: 
}
H2 {
&#9;ORPHANS: 3; WIDOWS: 3; 9: 
}
H3 {
&#9;ORPHANS: 3; WIDOWS: 3; 9: 
}
H2 {
&#9;PAGE-BREAK-AFTER: avoid; 9: 
}
H3 {
&#9;PAGE-BREAK-AFTER: avoid; 9: 
}
H4 {
&#9;PAGE-BREAK-AFTER: avoid; 9: 
}
    }
P {
&#9;MARGIN: 1em 0px; 9: 
}
A {
&#9;COLOR: #1a1a1a; 9: 
}
A:visited {
&#9;COLOR: #1a1a1a; 9: 
}
IMG {
&#9;MAX-WIDTH: 100%; 9: 
}
H1 {
&#9;MARGIN-TOP: 1.4em; 9: 
}
H2 {
&#9;MARGIN-TOP: 1.4em; 9: 
}
H3 {
&#9;MARGIN-TOP: 1.4em; 9: 
}
H4 {
&#9;MARGIN-TOP: 1.4em; 9: 
}
H5 {
&#9;MARGIN-TOP: 1.4em; 9: 
}
H6 {
&#9;MARGIN-TOP: 1.4em; 9: 
}
H5 {
&#9;FONT-SIZE: 1em; FONT-STYLE: italic; 9: 
}
H6 {
&#9;FONT-SIZE: 1em; FONT-STYLE: italic; 9: 
}
H6 {
&#9;FONT-WEIGHT: normal; 9: 
}
OL {
&#9;MARGIN-TOP: 1em; PADDING-LEFT: 1.7em; 9: 
}
UL {
&#9;MARGIN-TOP: 1em; PADDING-LEFT: 1.7em; 9: 
}
LI > OL {
&#9;MARGIN-TOP: 0px; 9: 
}
LI > UL {
&#9;MARGIN-TOP: 0px; 9: 
}
BLOCKQUOTE {
&#9;COLOR: #606060; PADDING-LEFT: 1em; BORDER-LEFT: #e6e6e6 2px solid; MARGIN: 1em 0px 1em 1.7em; 9: 
}
CODE {
&#9;FONT-SIZE: 85%; FONT-FAMILY: Menlo, Monaco, 'Lucida Console', Consolas, monospace; MARGIN: 0px; 9: 
}
PRE {
&#9;OVERFLOW: auto; MARGIN: 1em 0px; 9: 
}
PRE CODE {
&#9;OVERFLOW: visible; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; 9: 
}
.sourceCode {
&#9;OVERFLOW: visible; BACKGROUND-COLOR: transparent; 9: 
}
HR {
&#9;BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 1px; BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; MARGIN: 1em 0px; BACKGROUND-COLOR: #1a1a1a; 9: 
}
TABLE {
&#9;WIDTH: 100%; BORDER-COLLAPSE: collapse; OVERFLOW-X: auto; MARGIN: 1em 0px; DISPLAY: block; 9: ; font-variant-numeric: lining-nums tabular-nums
}
TABLE CAPTION {
&#9;MARGIN-BOTTOM: 0.75em; 9: 
}
TBODY {
&#9;BORDER-TOP: #1a1a1a 1px solid; MARGIN-TOP: 0.5em; BORDER-BOTTOM: #1a1a1a 1px solid; 9: 
}
TH {
&#9;BORDER-TOP: #1a1a1a 1px solid; PADDING-BOTTOM: 0.25em; PADDING-TOP: 0.25em; PADDING-LEFT: 0.5em; PADDING-RIGHT: 0.5em; 9: 
}
TD {
&#9;PADDING-BOTTOM: 0.25em; PADDING-TOP: 0.12em; PADDING-LEFT: 0.5em; PADDING-RIGHT: 0.5em; 9: 
}
header {
&#9;MARGIN-BOTTOM: 4em; TEXT-ALIGN: center; 9: 
}
#TOC LI {
&#9;LIST-STYLE-TYPE: none; 9: 
}
UNKNOWN {
&#9;TEXT-DECORATION: none; 9: 
}
CODE {
&#9;WHITE-SPACE: pre-wrap; 9: 
}
SPAN.smallcaps {
&#9;FONT-VARIANT: small-caps; 9: 
}
SPAN.underline {
&#9;TEXT-DECORATION: underline; 9: 
}
DIV.column {
&#9;WIDTH: 50%; VERTICAL-ALIGN: top; DISPLAY: inline-block; 9: 
}
DIV.hanging-indent {
&#9;MARGIN-LEFT: 1.5em; TEXT-INDENT: -1.5em; 9: 
}
UL.task-list {
&#9;LIST-STYLE-TYPE: none; 9: 
}
.display {
&#9;TEXT-ALIGN: center; DISPLAY: block; 9: 
}

[ghost]

Additional differences for cover image

valid html:

<H1 class=title>####</H1>
<P class=author>####</P>
<P class=date>####</P></HEADER>
<P><img src="file:///[PrimaryStorage]27/10/8205_files/images/9781593279196.jpg"></P>
<P><SPAN id=cover.xhtml></SPAN></P>
<DIV class=cover><img alt=Image src="file:///[PrimaryStorage]27/10/8205_files/images/9781593279196.jpg"> </DIV>

invalid html:

<BODY><HEADER id=title-block-header>
<H1 class=title>#####</H1>
<P class=author>####</P>
<P class=date>####</P></HEADER>
<P></P>
<P><SPAN id=cover.xhtml></SPAN></P>
<DIV class=cover></DIV>

[jgm]

I don't know what SuperMemo is, but unless you can point to some specific problem with the epub pandoc produces, perhaps it would be best to start by reporting this to SuperMemo?

[ghost]

Thanks, will report this to SM author and see what could be the issue.

[ghost]

I don't know what SuperMemo is, but unless you can point to some specific problem with the epub pandoc produces, perhaps it would be best to start by reporting this to SuperMemo?

Have found out the culprit in question, from ver. 2.11 of pandoc feature:
"
Add CSS to default HTML template (#6601, Mauro Bieg). This greatly improves the default typography in pandoc’s HTML output. The CSS is sensitive to a number of variables (e.g. mainfont, fontsize, linestretch): see the manual for details. To restore the earlier, more spartan output, you can disable this with -M document-css=false.
"

when using as recommended -M document-css=false output from .epub to .html is successfully imported to SuperMemo with pictures/media.