Github 发布具有连续部署的bot后,不会显示图像

Github 发布具有连续部署的bot后,不会显示图像,github,continuous-integration,botframework,azure-web-app-service,wwwroot,Github,Continuous Integration,Botframework,Azure Web App Service,Wwwroot,我已经使用bot框架开发了一个bot。当我在Bot框架模拟器上本地运行它时,它会显示图像。但在通过创建私有GitHub存储库将其发布到Azure上后,将不会显示任何图像。我使用的是直连API 3.0。原因可能是什么 这是我项目的树状视图。“图像”文件夹位于“内容根目录”中 我使用以下静态方法来检索图像路径 public static string CreateImagePath(string filename) { return Path.Combine(TempDat

我已经使用bot框架开发了一个bot。当我在Bot框架模拟器上本地运行它时,它会显示图像。但在通过创建私有GitHub存储库将其发布到Azure上后,将不会显示任何图像。我使用的是直连API 3.0。原因可能是什么

这是我项目的树状视图。“图像”文件夹位于“内容根目录”中

我使用以下静态方法来检索图像路径

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"));
CreateAptiveElement定义为:

public static AdaptiveElement CreateAdaptiveElement(AdaptiveCard card, string adaptiveElementId)
    {
        return card.Body.Find(ae => ae.Id == adaptiveElementId);
    }
这是在本地运行bot时返回的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得到的!!

以下是我的欢迎卡.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);
    }
}

TL;博士

您必须为AdaptiveCards中显示的项目提供公共URL,而不是本地项目。它在本地与仿真器一起工作,因为。。。您位于本地,并且emulator可以访问您的本地文件,因此它可以理解具有本地位置的文件(
C:\…
D:\…
文件)

因此,请更改路径,使其使用您的子域:您可以在此处执行此操作,例如,使用配置变量而不是
TempData.HostingEnvironment?.ContentRootPath

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

AdaptiveCard
项在bot消息中作为附件传递,内部的所有内容都由客户端(通道)呈现,因此它只能呈现从外部“可见”的内容

请看我的演示:我使用了一张带有两幅图像的卡片:一幅图像带有web上的URL,另一幅图像的URL构建与您的类似

本地:两个图像都可以。

已发布:仅显示第一个图像

如果您查看右侧的检查器,很明显您必须更改构建图像Url的方式

您还可以通过右键单击图像所在的区域来查看部署的webchat,您将找到一个带有
D:\…
路径的链接

代码修复

首先,将您的
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();
    }
}

TL;博士

您必须为AdaptiveCards中显示的项目提供公共URL,而不是本地项目。它在本地与仿真器一起工作,因为。。。您位于本地,并且emulator可以访问您的本地文件,因此它可以理解具有本地位置的文件(
C:\…
D:\…
文件)

因此,请更改路径,使其使用您的子域:您可以在此处执行此操作,例如,使用配置变量而不是
TempData.HostingEnvironment?.ContentRootPath

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

AdaptiveCard
项在bot消息中作为附件传递,内部的所有内容都由客户端(通道)呈现,因此它只能呈现从外部“可见”的内容

请看我的演示:我使用了一张带有两幅图像的卡片:一幅图像带有web上的URL,另一幅图像的URL构建与您的类似

本地:两个图像都可以。

已发布:仅显示第一个图像

如果您查看右侧的检查器,很明显您必须更改构建图像Url的方式

您还可以通过右键单击图像所在的区域来查看部署的webchat,您将找到一个带有
D:\…
路径的链接

代码修复

首先,将您的
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();
    }
}


你有没有检查这些图片是否已经发布?发布路径时是否确定该路径?您可以使用Kudu检查文件是否部署在您的Web上App@NicolasR,是的,图片已经发布了,我对路径很确定。此外,所有图像都部署在我的Web应用程序上。您能否添加有关实现的更多详细信息(关于如何使用您创建的Uri)?@NicolasR yeah sure@NicolasR这会是一个斜杠的问题吗?查看日志,它是“images\”,但在返回的uri中,它是“images/”。是否检查了图像是否已发布?发布路径时是否确定该路径?您可以使用Kudu检查文件是否部署在您的Web上App@NicolasR,是的,图片已经发布了,我对路径很确定。此外,所有图像都部署在我的Web应用程序上。您能否添加有关实现的更多详细信息(关于如何使用您创建的Uri)?@NicolasR yeah sure@NicolasR这会是一个斜杠的问题吗?查看日志,它是“images\”,但在返回的uri中,它是“images/”。是的,我使用了很多网络上的图像,它们甚至在发布后也会像你的一样显示在卡片上。但我在卡片中填充的大多数图像都在“图像”文件夹中。我想用这些图像渲染我的卡片。难道没有其他方法可以做到这一点吗?当您在发布时复制它们时,它们是可用的!您只需要使用«»而不是您可以通过多种方式来完成,例如,请参阅我添加的这个线程的代码结论,以帮助您在本地和部署的uriWow之间进行切换!它就像一个魔术。。。非常感谢尼古拉斯·罗伯特。是的,我在网上用过很多图片,它们像你的一样显示在卡片上,甚至在发布之后。但我在卡片中填充的大多数图像都在“图像”文件夹中。我想用这些图像渲染我的卡片。难道没有其他方法可以做到这一点吗?当您在发布时复制它们时,它们是可用的!你只需要使用«»而不是你可以用