Images are not resizing to desired width&height.

[george-bh]

Description I'm trying to set the width&height of the image. The image is exceeding these values.

Checklist

• [x] I can reproduce this issue with a vanilla SwiftUI project.
• [x] I can reproduce this issue using the main branch of this package.
• [x] This bug hasn't been addressed in an existing GitHub issue.

Steps to reproduce

1. Include an image into the markdown. You can use the example below

let text = "TOMMY HILFIGER Store\n![](https://aez.acc.ece.esolut.org/fileadmin/_processed_/a/2/csm_AEZ-TH-MEMBERVIPNIGHTS-08092022_a99101572d.jpg)\n\n"
Markdown { text }
                .markdownTheme(
                    .init().image { configuration in
                        configuration.label
                            .frame(width: 30, height: 30)
                    }
                )

2. Image exceeds the screen size

Expected behavior Image should have the desired width&height.

Screenshots Screenshot

Version information

• MarkdownUI: 2.1.0
• OS: iOS 15
• Xcode: 14.1.0

[gonzalezreal]

Hi @odariusgeorge,

The theme image property is a block style that allows customizing the appearance of isolated images instead of images laid out within a line of text. I will improve the documentation to make that clear.

We cannot use the image block style because SwiftUI doesn't allow concatenating Text with any View implementation (which is what a block style returns), just with other Text views. But SwiftUI allows creating a Text view from an Image view, which MarkdownUI uses for inline images.

In this particular case, the workaround is to put the image in a different paragraph:

Markdown {
  """
  TOMMY HILFIGER Store

  ![](https://aez.acc.ece.esolut.org/fileadmin/_processed_/a/2/csm_AEZ-TH-MEMBERVIPNIGHTS-08092022_a99101572d.jpg)
  """
}
.markdownBlockStyle(\.image) { configuration in
  configuration.label
    .frame(width: 30, height: 30)
}

If that workaround is not suitable for your use case, MarkdownUI offers the InlineImageProvider protocol as a customization point for inline images. You can create an implementation that resizes the images as you wish.

I am closing this issue for the reasons mentioned above. However, there is an ongoing discussion about implementing an inline image provider that resizes inline images to the current font size. It is related to what you want to achieve, so feel free to jump in and share your thoughts.