Изображения не отображаются после публикации бота с непрерывным развертыванием - PullRequest
0 голосов
/ 17 мая 2019

Я разработал бота с использованием Bot Framework. Он показывает изображения, когда я запускаю его локально в эмуляторе Bot Framework. Но после публикации в Azure путем создания частного репозитория GitHub ни одно из изображений не отображается. Я использую Direct-Line API 3.0. В чем может быть причина?

Например, вот древовидная структура моего проекта. Папка с изображениями находится в корне содержимого.

Project Tree View

Я использую следующий статический метод для извлечения пути к изображению.

public static string CreateImagePath(string filename)
    {
        return Path.Combine(TempData.HostingEnvironment?.ContentRootPath, "images", $"{filename}");
    }

А затем преобразовать его в Uri и присвоить его образу адаптивной карты. Вот фрагмент кода.

(AdaptiveCardFactory.CreateAdaptiveElement(card, "image") as AdaptiveImage).Url =
            new Uri(PathFactory.CreateImagePath("welcome_card_image.png"));

CreateAdaptiveElement определяется как:

public static AdaptiveElement CreateAdaptiveElement(AdaptiveCard card, string adaptiveElementId)
    {
        return card.Body.Find(ae => ae.Id == adaptiveElementId);
    }

Это Uri, который возвращается, когда я запускаю бот локально. это работает отлично.

file:///C:/Users/Husai/source/repos/PanjaSahibBot/images/welcome_card_image.png

Вот что возвращается после публикации.

file:///D:/home/site/wwwroot/images/welcome_card_image.png

И это не работает.

Вот последний журнал команд.

    Command: "D:\home\site\deployments\tools\deploy.cmd"
Handling ASP.NET Core Web Application deployment.
  Restoring packages for D:\home\site\repository\GurdwaraBot.csproj...
  Generating MSBuild file D:\home\site\repository\obj\GurdwaraBot.csproj.nuget.g.props.
  Generating MSBuild file D:\home\site\repository\obj\GurdwaraBot.csproj.nuget.g.targets.
  Restore completed in 5.02 sec for D:\home\site\repository\GurdwaraBot.csproj.
Microsoft (R) Build Engine version 15.9.20+g88f5fadfbe for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.

  Restore completed in 1.41 sec for D:\home\site\repository\GurdwaraBot.csproj.
  GurdwaraBot -> D:\home\site\repository\bin\Release\netcoreapp2.2\GurdwaraBot.dll
  GurdwaraBot -> D:\local\Temp\8d6da8df6d390f3\
Creating app_offline.htm
KuduSync.NET from: 'D:\local\Temp\8d6da8df6d390f3' to: 'D:\home\site\wwwroot'
Copying file: 'GurdwaraBot.deps.json'
Copying file: 'GurdwaraBot.dll'
Copying file: 'GurdwaraBot.pdb'
Copying file: 'GurdwaraBot.runtimeconfig.json'
Copying file: 'images\01d.png'
Copying file: 'images\01n.png'
Copying file: 'images\02d.png'
Copying file: 'images\02n.png'
Copying file: 'images\03d.png'
Copying file: 'images\03n.png'
Copying file: 'images\04d.png'
Copying file: 'images\04n.png'
Copying file: 'images\09d.png'
Copying file: 'images\09n.png'
Copying file: 'images\1.jpg'
Copying file: 'images\10.jpg'
Copying file: 'images\10d.png'
Copying file: 'images\10n.png'
Copying file: 'images\11d.png'
Copying file: 'images\11n.png'
Copying file: 'images\13d.png'
Copying file: 'images\13n.png'
Copying file: 'images\2.jpg'
Copying file: 'images\3.jpg'
Copying file: 'images\4.jpg'
Copying file: 'images\5.jpg'
Copying file: 'images\50d.png'
Copying file: 'images\50n.png'
Copying file: 'images\6.jpg'
Copying file: 'images\7.jpg'
Copying file: 'images\8.jpg'
Copying file: 'images\9.jpg'
Copying file: 'images\bill.png'
Copying file: 'images\feedback.png'
Copying file: 'images\Festivals.jpg'
Copying file: 'images\festivals_bandi_chhor_divas.jpg'
Copying file: 'images\festivals_gurpurab.jpeg'
Copying file: 'images\festivals_hola_mohalla.jpg'
Copying file: 'images\festivals_maghi.jpg'
Copying file: 'images\festivals_martyrdom_of_guru_arjan.jpg'
Copying file: 'images\festivals_parkash_utsav_dasveh_patshah.jpg'
Copying file: 'images\festivals_vaisakhi.jpg'
Copying file: 'images\menu_card_image.png'
Copying file: 'images\panja_thumbnail_1.png'
Copying file: 'images\panja_thumbnail_2.png'
Copying file: 'images\panja_thumbnail_3.png'
Copying file: 'images\pof_guest_hotel.jpg'
Copying file: 'images\question.png'
Omitting next output lines...
Finished successfully.

Это то, что я ожидаю. Локально выполненный И это то, что я получаю через DirectLine! Фактический результат

Вот содержимое моей welcome_card.json

    {
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "Image",
      "id": "image",
      "horizontalAlignment": "Center",
      "style": "Person",
      "url": "",
      "size": "Medium"
    },
    {
      "type": "TextBlock",
      "horizontalAlignment": "Center",
      "size": "Medium",
      "weight": "Bolder",
      "color": "Accent",
      "text": "Welcome to Gurdwara Bot",
      "wrap": true
    },
    {
      "type": "TextBlock",
      "horizontalAlignment": "Left",
      "text": "Hi there! I'm the Sri Panja Sahib's support bot. What can I help you with today? Just so you know, you can enter **MENU** anytime you want to go back to the options below, or just go ahead type your query.",
      "wrap": true
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Get an Overview",
      "data": {
        "dataId": "overview"
      }
    },
    {
      "type": "Action.Submit",
      "title": "Ask a Question",
      "data": {
        "dataId": "question"
      }
    },
    {
      "type": "Action.Submit",
      "title": "Book a Room",
      "data": {
        "dataId": "room"
      }
    },
    {
      "type": "Action.Submit",
      "title": "Give a Feedback",
      "data": {
        "dataId": "feedback"
      }
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "speak": "Hi there! I'm the Sri Panja Sahib's support bot. What can I help you with today? Just so you know, you can enter **MENU** anytime you want to go back to the options below, or just go ahead type your query."
}

Я определил AdaptiveCardFactory для манипулирования картами.

public class AdaptiveCardFactory
{
    public static AdaptiveCard CreateAdaptiveCard(string path)
    {
        try
        {
            var adaptiveCardJson = File.ReadAllText(path);
            AdaptiveCardParseResult result = AdaptiveCard.FromJson(adaptiveCardJson);
             return result.Card;
        }
        catch (AdaptiveSerializationException)
        {
            throw;
        }
    }

    public static Attachment CreateAdaptiveCardAttachment(AdaptiveCard card)
    {
        return new Attachment
        {
            ContentType = "application/vnd.microsoft.card.adaptive",
            Content = card,
        };
    }

    public static AdaptiveElement CreateAdaptiveElement(AdaptiveCard card, string adaptiveElementId)
    {
        return card.Body.Find(ae => ae.Id == adaptiveElementId);
    }
}

1 Ответ

2 голосов
/ 17 мая 2019

TL; DR;

Вы должны предоставить общедоступные URL-адреса для элементов, отображаемых на AdaptiveCards, а не локальных. Он работает локально с эмулятором, потому что ... вы находитесь в локальном режиме, и эмулятор имеет доступ к вашим локальным файлам, поэтому он может понимать файлы с локальным расположением (C:\... или D:\... файлы).

Так что измените ваш путь, чтобы он использовал ваш поддомен: вы можете сделать это здесь, например, используя переменную конфигурации вместо TempData.HostingEnvironment?.ContentRootPath

public static string CreateImagePath(string filename)
{
    return Path.Combine(TempData.HostingEnvironment?.ContentRootPath, "images", $"{filename}");
}

подробности:

AdaptiveCard элемент передается в виде вложения в сообщение бота, все, что находится внутри, визуализируется клиентом (каналом), поэтому он может отображать только то, что «видно» извне.

См. Мою демонстрацию здесь: я использовал карту с набором изображений из 2 изображений: одно с URL-адресом в Интернете, а другое - с URL-адресом, подобным вашему.

Местный: оба изображения в порядке. enter image description here

Опубликовано: отображается только 1-е изображение Published

Если вы посмотрите на Инспектора с правой стороны, станет очевидно, что вы должны изменить способ создания своего изображения Url.

Вы также можете просмотреть развернутый веб-чат, щелкнув правой кнопкой мыши зону, где должно быть изображение, и вы найдете ссылку с D:\... path

Код исправления

1-й, переместите папку images в папку wwwroot вашего проекта. Тогда вы можете сделать следующее:

public string CreateImagePath(string filename)
{
    if (_hostingEnvironment.IsDevelopment())
    {
        return Path.Combine(TempData.HostingEnvironment?.ContentRootPath, "wwwroot", "images", $"{filename}");
    }
    else
    {
        var targetUri = new Uri(new Uri($"https://{Environment.ExpandEnvironmentVariables("%WEBSITE_SITE_NAME%")}.azurewebsites.net"), Path.Combine("images", $"{filename}"));
        return targetUri.ToString();
    }
}
...