Umbraco 8 + React - Как получить доступ к изображению

Question

Попытка получить изображение из Umbraco и отобразить его с помощью React.

Я могу вытащить весь текст, например, так:

{String(this.props.data['carouselUnderImageText'])} {String(this.props.data['carouselLink'])}

Но при создании изображения -

<img src={this.props.data["carouselImage"]} или <img src={String(this.props.data["carouselImage"])} />

Эти двое не сработают, похоже, мне возвращают URL umb://media/8990dd19cfb746e0bea4baec5df20d01

Есть идеи, как это решить? Я не нашел достаточно документации, чтобы исправить эту проблему при использовании Umbraco с React.

Если есть что-то еще, что я могу показать, чтобы помочь ответить на этот вопрос, просто оставьте это в комментариях, и я обновлю вопрос.

Заранее большое спасибо.

Answer 1

Вы можете получить IPublishedContent файла изображения, используя функцию TypedMedia в Umbraco Helper, после чего вы можете получить доступ к URL-адресу изображений, который необходимо передать для реакции.

var umbracoHelper = new UmbracoHelper(UmbracoContext.Current);
Udi.TryParse(carouselImage, out var carouselImageUdi); // this parses the umb://media string into a UDI to be used in TypedMedia.
var imageUrl = umbracoHelper.TypedMedia(carouselImageUdi).Url;