Images not showing up correctly

[amarillox]

Hello, I'm a student using e-books for academic purposes, for the book I'm using, it seems the pictures do not load properly. Has anyone encountered a similar problem? Here's what it looks like https://imgur.com/a/tqQBIjU

Edit: Forgive me if I posted in the wrong thread, I'm new to this

[theducks]

Is what is 'incorrect', that the image appears 3 times?

[Karellen]

I imagine the "incorrect" portion is the code being displayed instead of an image.

Might be worth posting the image code from the xhtml file so we can see what it contains

[theducks]

Originally Posted by Karellen

I imagine the "incorrect" portion is the code being displayed instead of an image.

Might be worth posting the image code from the xhtml file so we can see what it contains

I was guessing this was a coding book with a 'screen shot' example.

But we need to see the XHTML code that made that 'page'

[amarillox]

Thank you for your reply, it's actually an accounting book, sorry for not specifying but here's the image code for the first picture from my screen shot:

Spoiler:

{"version":1,"tree":{"n":"html","c":[{"n":"head","c":[{"n":"title","x":"MHE Video Widget"},{"n":"meta","a":[["name","mhe:build"],["content","widget"]]},{"n":"meta","a":[["name","mhe:name"],["content","mhe-video"]]},{"n":"meta","a":[["name","mhe:version"],["content","version:1.8.0"]]},{"n":"meta","a":[["name","mhe:uuid"],["content","not-authored"]]},{"n":"link","a":[["rel","stylesheet"],["href","../../../mhe.acme-common/v0/css/mhe-base-widget--no-font-faces.min.css"]]},{"n":"link","a":[["rel","stylesheet"],["href","css/index.min.css"]]},{"n":"link","a":[["rel","stylesheet"],["data-course-css","courseCssTheme"]]}]},{"n":"body","a":[["class","widget widget-mhe-video widget-mode-player mhe-theme-namespace"]],"c":[{"n":"div","a":[["class","acmeLoader--outer"]],"c":[{"n":"div","a":[["class","acmeLoader--wrapper"]],"c":[{"n":"div","x":"Loading","a":[["class","acmeLoader--text"]]},{"n":"div","a":[["class","acmeLoader--bar"]],"c":[{"n":"div","a":[["class","acmeLoader--bar-inner"]]}]},{"n":"div","x":"Waiting for connection state","a":[["class","acmeLoader--subText"]]}]}]},{"n":"div","a":[["id","video-pane"],["class","video-pane"]],"c":[{"n":"div","x":"This is a 3D video. To pan, drag the image or use up, down, left, and right arrow keys.","a":[["id","three-d-caption"],["aria-hidden","true"]]},{"n":"div","a":[["id","video-div"]]},{"n":"div","a":[["aria-live","polite"]],"c":[{"n":"div","a":[["class","alt-text-show-hide hide"]],"c":[{"n":"button","x":"Show Transcript","l":" ","a":[["role","button"],["class","mhe-button-secondary js-alt-text-show i18n-show-transcript"],["aria-hidden","true"]]},{"n":"button","x":"Hide Transcript","a":[["role","button"],["class","mhe-button-secondary js-alt-text-hide i18n-hide-transcript hide"],["aria-hidden","true"]]}]},{"n":"div","a":[["id","alternative-text"],["aria-hidden","true"]]}]}]},{"n":"script","x":"var Acme=Acme||{};Acme.console=function(){\"use strict\";var e={setLogLevel:function(e){if(\"number\"==typeof e)t=e;else{var o=n[e];t=void 0!==o?o:0}},setPrefix:function(e){o=e},generateRan domPrefix:function(e){var n=\"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";e=e||4; var t,r;for(o=\"\",t=0;t=4&&console.dir}},n={none:0,er ror:1,warn:2,info:3,log:4},t=2,o=\"\";return e}(),(Acme=Acme||{}).loadingScreen=function(){\"us e strict\";var e=!0;return{setMessage:function(n){if(!e)return!1; var t=document.querySelector(\".acmeLoader--outer .acmeLoader--subText\");return t&&(t.innerHTML=n),!0},stop:function(n,t,o){e=!1;v ar r=document.querySelector(\".acmeLoader--outer\");r&&(r.classList.add(\"stopped\"),r.classL ist.add(\"state-\"+n));var c=document.querySelector(\".acmeLoader--outer .acmeLoader--text\");c&&(c.innerHTML=t);var i=document.querySelector(\".acmeLoader--outer .acmeLoader--subText\");return i&&(i.innerHTML=o),!0},STATES:{ERROR:\"error\",WAR N:\"warn\",INFO:\"info\"},MESSAGES:{STOP_INTERNET_ CONNECTION_REQUIRED__TEXT:\"No internet connection\",STOP_INTERNET_CONNECTION_REQUIRED__SU BTEXT:\"Connect to a network and reload the page to view content.\"}}}(),(Acme=Acme||{}).earlyUserState=fun ction(){\"use strict\";function e(){Acme.console.log(\"[EARLY USER STATE] Listening canceled\"),window.removeEventListener(\"message\" ,n)}function n(n){var o=n.data;\"data\"===o.type&&(Acme.loadingScreen.se tMessage(\"Received user state\"),Acme.console.log(\"[EARLY USER STATE] Message arrived\"),e(),void 0===o.data?(Acme.console.log(\"[EARLY USER STATE] No user state\"),t=null):(Acme.console.log(\"[EARLY USER STATE] User state received\"),t=o.data))}var t;return{startListening:function(){Acme.loadingScr een.setMessage(\"Listening for user state\"),Acme.console.log(\"[EARLY USER STATE] Listening\"),window.addEventListener(\"message\",n ,!1)},cancelListening:e,getData:function(){return t}}}(),(Acme=Acme||{}).courseTheme=function(){\"us e strict\";function e(e){var t=e.data;\"widget-display-context\"===(t.action||t.type)&&t.properties.theme CssFile&&n(t.properties.themeCssFile)}function n(e){(function(e,n){var t=document.querySelector(\"link[\"+e+'=\"'+n+'\"]');return t||((t=document.createElement(\"link\")).setAttrib ute(\"rel\",\"stylesheet\"),t.setAttribute(e,n),do cument.querySelector(\"head\").appendChild(t)),t}) (\"data-course-css\",\"courseCssTheme\").setAttribute(\"href\",e) }return{startListening:function(){window.addEventL istener(\"message\",e)}}}(),(Acme=Acme||{}).intern etConnection=function(){\"use strict\";var e;return{init:function(n,t){void 0!==t?(Acme.console.info(\"[INTERNET CONNECTION] Simulating state: \"+t),e=t,n&&n()):function(){var t=new XMLHttpRequest,o=(new Date).getTime();t.onreadystatechange=function(){4= ==this.readyState&&(e=200===this.status,Acme.conso le.info(\"[INTERNET CONNECTION] Detected state: \"+e),n&&n())},t.open(\"GET\",\"//httpbin.org/image/png?\"+o,!0),t.send()}()},get:function(){return e}}}(),(Acme=Acme||{}).fontLoader=function(){\"use strict\";return{loadFontFaces:function(){var e=\"\";Acme.internetConnection.get()?(Acme.console .log(\"[FONT-FACE] will use cdn fonts\"),e=\"../../../mhe.acme-common/v0/css/mhe-base-font--cdn.min.css\"):(Acme.console.log(\"[FONT-FACE] will use local fonts\"),e=\"../../../mhe.acme-common/v0/css/mhe-base-font--local.min.css\"),Acme.console.log(\"[FONT-FACE] creating font face stylesheet link\");var n=document.createElement(\"link\");n.rel=\"stylesh eet\",n.href=e;var t=document.querySelector(\"head\");t?t.insertBefor e(n,t.firstChild):Acme.console.error(\"[FONT-FACE] unable to inject link element into DOM head\")}}}();var App=App||{};App.libraries=[{name:\"jQuery\",online:\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\",offline:\"../../../../widgets/shared/jquery-2.2.4.min.js\"}],App.scripts=[\"../../../../widgets/shared/mhe/mhe-widget.js\",\"js/index.min.js\"],(Acme=Acme||{}).scriptLoader=function(){\"use strict\";function e(e,n){var t=document.createElement(\"script\");t.src=e,t.onl oad=n,document.body.appendChild(t)}return{loadAll: function(){var n;Acme.internetConnection.get()?(n=\"online\",Acme .loadingScreen.setMessage(\"Setting up for online use\")):(n=\"offline\",Acme.loadingScreen.setMessa ge(\"Setting up for offline use\")),function(t){function o(){var r,c;App.libraries&&App.libraries.length>0?(c=(r=Ap p.libraries.shift())[n])?e(c,o):Acme.console.log(\"[SCRIPT LOADER] Skipping \"+r.name):t&&t()}Acme.loadingScreen.setMessage(\" Loading libraries\"),o()}(function(){function n(){App.scripts&&App.scripts.length>0?e(App.script s.shift(),n):\"function\"==typeof App.run&&App.run()}Acme.loadingScreen.setMessage(\ "Loading scripts\"),n()})},loadScript:e}}(),Acme.console.se tLogLevel(\"log\"),Acme.console.generateRandomPref ix(),Acme.earlyUserState.startListening(),Acme.int ernetConnection.init(function(){Acme.fontLoader.lo adFontFaces(),Acme.scriptLoader.loadAll()});"}]}]},"ns_map":["http://www.w3.org/1999/xhtml"]}

[amarillox]

Originally Posted by Karellen

I imagine the "incorrect" portion is the code being displayed instead of an image.

Might be worth posting the image code from the xhtml file so we can see what it contains

Yes precisely

[DNSB]

Out of curiosity, what format is the ebook? If I'm not wrong, that coding is for a video widget for embedding in a web page. Which ereader or app have you tired to use this ebook with other than the calibre viewer which would need an epub2 compatible video viewer.

[amarillox]

Originally Posted by DNSB

Out of curiosity, what format is the ebook? If I'm not wrong, that coding is for a video widget for embedding in a web page. Which ereader or app have you tired to use this ebook with other than the calibre viewer which would need an epub2 compatible video viewer.

It's formatted as an epub doc, I haven't done much experimenting with other ereaders besides Adobe Acrobat (because I also have a PDF version). Is there an ereader you would recommend I could try?

[DNSB]

Not really no. I have played to a very limited extent with video/audio using Kobo's .kepub.epub to force it's WebKit based epub3 renderer but that has very specific requirements since it is epub3 standards compliant. See the EPUB Media Overlays 3.2.

It will not run a random widget.