Office AddIn 按钮的图标不会显示答案

【问题标题】：Office AddIn button's icon won't show upOffice AddIn 按钮的图标不会显示
【发布时间】：2017-12-14 17:37:26
【问题描述】：

这是清单主机的摘录

<ExtensionPoint xsi:type="PrimaryCommandSurface">
    <CustomTab id="MyTab">
        <Group id="Raporty.GroupPabcd">
            <Label resid="Raporty.GroupPabcd.Label" />
            <Icon>
                <bt:Image resid="Raporty.Icon1_16" size="16" />
                <bt:Image resid="Raporty.Icon1_20" size="20" />
                <bt:Image resid="Raporty.Icon1_24" size="24" />
                <bt:Image resid="Raporty.Icon1_32" size="32" />
                <bt:Image resid="Raporty.Icon1_40" size="40" />
                <bt:Image resid="Raporty.Icon1_48" size="48" />
                <bt:Image resid="Raporty.Icon1_64" size="64" />
                <bt:Image resid="Raporty.Icon1_80" size="80" />
            </Icon>

            <Control xsi:type="Button" id="RaportPabcd.Button">
                <Label resid="RaportPabcd.Button.Label" />
                <Supertip>
                    <Title resid="RaportPabcd.Button.Label" />
                    <Description resid="RaportPabcd.Button.Tooltip" />
                </Supertip>
                <Icon>
                    <bt:Image resid="Raporty.Icon1_16" size="16" />
                    <bt:Image resid="Raporty.Icon1_20" size="20" />
                    <bt:Image resid="Raporty.Icon1_24" size="24" />
                    <bt:Image resid="Raporty.Icon1_32" size="32" />
                    <bt:Image resid="Raporty.Icon1_40" size="40" />
                    <bt:Image resid="Raporty.Icon1_48" size="48" />
                    <bt:Image resid="Raporty.Icon1_64" size="64" />
                    <bt:Image resid="Raporty.Icon1_80" size="80" />
                </Icon>

                <Action xsi:type="ShowTaskpane">
                    <TaskpaneId>ButtonId1</TaskpaneId>
                    <SourceLocation resid="Contoso.Taskpane.Url" />
                </Action>
            </Control>

        </Group>
        <Label resid="Raporty.Tab.Label" />
    </CustomTab>
</ExtensionPoint>

还有资源

<Resources>
    <bt:Images>
        <bt:Image id="Raporty.Icon1_16" DefaultValue="~remoteAppUrl/Images/ReportIcons/report_1_16.png" />
        <bt:Image id="Raporty.Icon1_20" DefaultValue="~remoteAppUrl/Images/ReportIcons/report_1_20.png" />
        <bt:Image id="Raporty.Icon1_24" DefaultValue="~remoteAppUrl/Images/ReportIcons/report_1_24.png" />
        <bt:Image id="Raporty.Icon1_32" DefaultValue="~remoteAppUrl/Images/ReportIcons/report_1_32.png" />
        <bt:Image id="Raporty.Icon1_40" DefaultValue="~remoteAppUrl/Images/ReportIcons/report_1_40.png" />
        <bt:Image id="Raporty.Icon1_48" DefaultValue="~remoteAppUrl/Images/ReportIcons/report_1_48.png" />
        <bt:Image id="Raporty.Icon1_64" DefaultValue="~remoteAppUrl/Images/ReportIcons/report_1_64.png" />
        <bt:Image id="Raporty.Icon1_80" DefaultValue="~remoteAppUrl/Images/ReportIcons/report_1_80.png" />
    </bt:Images>
</Resources>

问题是按钮显示默认图标

我尝试直接在浏览器中访问图像（即http://localhost/ExcelWebWeb/Images/ReportIcons/report_1_32.png），它确实显示了

我查看了 IIS 日志以查看图像是否被 Excel 应用程序查询过，但事实并非如此。我只能看到从本地浏览器到图标的访问日志，而插件只查询 html/js 文件（对于 TaskPane）而不查询按钮的图像。

【问题讨论】：

检查图片属性中的Build Action是否设置为Content。

标签： manifest office-addins

【解决方案1】：

我遇到了同样的问题，但找到了解决方案。请将以下内容添加到manifest.xml 文件中：

<Version>1.0.0.0</Version>
<ProviderName>abc</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
  <!-- The display name of your add-in. Used on the store and various places of 
   the Office UI such as the add-ins dialog. -->
  <DisplayName DefaultValue="abc" />
<IconUrl DefaultValue="~remoteAppUrl/Images/add-in-icon-lo-res.png"/>
<HighResolutionIconUrl DefaultValue="~remoteAppUrl/Images/add-in-icon-hi-res.png"/>

图像的分辨率应为 Iconurls 64 x 64 像素，png 为 8 位深度，HighResolutionIconUrl 为 128 x 128 像素

【讨论】：

对我来说，根本原因是 nginx 设置将 Cache-Control "no-cache, no-store, max-age=0, must-revalidate"; 这个 Cache-Control 标头设置为传入请求，导致图标在 Outlook2016 上不显示

【解决方案2】：

尝试用 localhost:[端口号] 替换“~remoteAppUrl”。发布应用时，这里需要改成主机和端口号

【讨论】：

【解决方案3】：

<CustomTab id="MyTab">
        <Group id="Raporty.MyTab.GroupPabcd">
            <Label resid="Raporty.MyTab.GroupPabcd.Label" />
......

            <Label resid="Raporty.MyTab.TabLabel" />

这是清单的正确代码。

【讨论】：

请不要发布裸代码，同时解释代码的作用。