Resizing inline images

[joshbuhler]

I've got SVG images that I'm using throughout my app, and I'd like to be able to use them inline with text as well. However, they're rendering way too big. Is there a way to have the image match the height of the line of text that it's being inserted into? Is there something I'm missing here?

let markdownString = """
      ## Try MarkdownUI

      **MarkdownUI** is a native Markdown image >> ![empireLogo](empire) << image renderer for SwiftUI
      compatible with the
      [GitHub Flavored Markdown Spec](https://github.github.com/gfm/).
      """
// Using it like this...
Markdown(markdownString)
                    .markdownImageProvider(.asset)
                    .markdownInlineImageProvider(.asset)

[gonzalezreal]

Hi @joshbuhler,

The current implementation takes the image provided by the InlineImageProvider implementation as-is. A possible workaround would be to create an InlineImageProvider implementation that resizes the images to a specific height. The drawback is that you'd need to guess the height value.

A more long-term solution would be to update the InlineImageProvider protocol to provide the current font size so that implementations like the asset inline image provider have the opportunity to resize images accordingly. Let me know your thoughts, and maybe I can add this feature to the roadmap.

[joshbuhler]

…update the InlineImageProvider protocol to provide the current font size so that implementations like the asset inline image provider have the opportunity to resize images accordingly.

I like this idea. Being able to drop an image into text like this, and have it match the font size (when desired) would be great. I'm working on an app that needs to be able to display various symbols inline with the text, but also needs to display them much larger as icons in other spots, so being able to use an SVG template image is going to be ideal.

[joshbuhler]

I've been playing around with this, and so far, haven't really found a way to resize the images inline w/ text - doing something like:

Text("My image looks like \(Image("image")) this.")

Still playing with that though, outside of Markdown, just to get an idea of how it would work. However, as a workaround, I have imported the SVG images I'd like to use as custom SF Symbols, and that's working pretty well for what I need. However, it would still be nice to have non-symbol images inline.

[flopshot]

Do you have an example of this? I ask because InlineImageProviders method returns an Image and modifying the image in a custom ImagProvider using frames, etc., erases the image to some View