Display image using HTML within app designer does not work

14 ビュー (過去 30 日間)
andrew levy
andrew levy 2021 年 11 月 26 日
コメント済み: andrew levy 2021 年 11 月 30 日
I am trying to include a HTML based guide within a matlap app. Most html markup is working fine. However, I cant get <img> to load up any pictures. I have some hope this is possible as a workaround was found in this thread (https://uk.mathworks.com/matlabcentral/answers/497260-figure-uitable-does-not-display-html-image-in-2019b) when images are placed inside a table. However, this workaround is not practical for my application.
I include some distilled code to illustrate the problem.
pic = fullfile(filepath,'Run_Button_Pic.png');
html = ['<img src="file:/' pic '" width="150" height="52"'];
html = ['<html>' html '</html>'];
% Doesnt work
%------------
fig = uifigure('Position',[561 497 333 239]);
h = uihtml(fig);
h.HTMLSource = html;
% Works
%------
uitable('Data', {html})

採用された回答

Sean de Wolski
Sean de Wolski 2021 年 11 月 29 日
編集済み: Sean de Wolski 2021 年 11 月 29 日
One way to do this is to explicitly base64 encode the image data. Here's an example for PNG file, you'd have to change the HTML source description for others. Remove the "$$REMOVETHIS$$" part - I had to add that or MATLAB answers tries to encode this and it looks all wrong in the browser!
png = your_png_file;
fid = fopen(png, 'r');
closer = onCleanup(@()fclose(fid));
bytes = fread(fid, inf, "uint8=>uint8");
b64 = matlab.net.base64encode(bytes);
img = ['<img src="$$REMOVETHIS$$data:image/png;base64,' b64 '" width="300" height="300">'];
html = ['<html>' img '</html>'];
fig = uifigure('Position',[561 497 333 239]);
h = uihtml(fig);
h.HTMLSource = html;
Also note, that if you develop your guide with a MATLAB live script, then you can export the live script to HTML and attach it in this manner. The exported live script already has the embedded figures as base 64. I find this to be a good way to make MATLAB-based documentation.
  1 件のコメント
andrew levy
andrew levy 2021 年 11 月 30 日
This worked a treat thank you very much !!

サインインしてコメントする。

その他の回答 (0 件)

カテゴリ

Help Center および File ExchangeMigrate GUIDE Apps についてさらに検索

製品


リリース

R2021b

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!

Translated by