Loading images in WKWebView on macOS

Question

I have a macOS application that allows the user to select markdown files thru NSOpenPanel.

let mdUrl = openPanel.urls.first! let baseUrl = mdUrl.deletingLastPathComponent() let md = try! String(contentsOf: mdUrl) let html = try! Down(markdownString: md).toHTML() webView.loadHTMLString(html, baseURL: baseUrl)

The problem is that the images located in a Images-folder at the same level as the selected md-file are not beeing loaded. Here is an example of the html-beeing loaded by the webView:

<!DOCTYPE html> <html> <body> <p><img src="Images/Exampleimage.png" alt="" /></p> </body> </html>

The baseUrl contains an Images-directory with the specified image. What should I do to get the images to load and display properly?

Heshan Sandeepa · Accepted Answer · 2019-03-19 12:36:42Z

1

In that case you have to represent image as Base64 String, try below code

 func getImageString(imageLocalPath: String) -> String? { //get UIImage from localPath let image:UIImage = // some method if let _image = image { // assume image is png, if not use relevant constrauction var data = UIImagePNGRepresentation(_image)! if let _data = data { let data64 = _data.base64EncodedString(options: Data.Base64EncodingOptions.endLineWithCarriageReturn) return "<img src='data:image/\(format);base64," + data64 + "' height=200 width=400>" } } return nil }

Add the strig of image as follows, then it should appear

var data64 = getImageString(//image_local path) "<img src='data:image/\(format);base64," + data64 + "' height=200 width=400>"

edited Mar 19, 2019 at 12:36

answered Mar 19, 2019 at 12:03

Heshan Sandeepa

3,7172 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Melodius Over a year ago

I'm trying to load images that are relative to the md-file beeing opened. If I open a file .../RootFolder/Test.md and there is .../RootFolder/Images/Exampleimage.png the relative path in the given tag is already pointing to the correct location??

Heshan Sandeepa Over a year ago

Are you trying to show local image in the webView ??

Melodius Over a year ago

If you just create a Index.html file and create a Images-folder with images in the same directory and open the Index.html that contains image-tags referencing images in the Images-folder in any browser, the images will show. WKWebView is not showing those images.

Melodius Over a year ago

Is there really no sane way to have the images load just as they do in any normal browser? Why won't plane old html work?

Heshan Sandeepa Over a year ago

Its possible to load in plane old html way, if you put the image and html file both in a folder in project. Just create folder in the xcode project and put image and html . Then p><img src="Images/Exampleimage.png" alt="" /></p> should work

|

Collectives™ on Stack Overflow

Loading images in WKWebView on macOS

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related