Custom Ribbon Logos Not Showing SharePoint Online

Question

I have built an application that is working great. However, I'm trying to use logos on these custom actions which are targeted towards document libraries and show up in the Library and Files Tab. (This is a Ribbon Custom Action)

I have the images for the logos within the Visual Studio Solution and everything renders perfectly fine within i'm just debugging it. However, when I publish is as a .app file and upload the app to the SharePoint Site, all the functionality works, but the ribbon icons just show a black x. What I can't figure out is why the actual App Icon renders great. They are all within the same folder but I guess there's something that uploading through the AppManifest does differently than just referencing the image in the elements.xml file:

Elements.xml (Doesn't Work)

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="d6e0a4c1-19a9-4846-92fb-d0593aa3bbfc.myAppNewFormAction"
                RegistrationType="List"
                RegistrationId="115"
                Location="CommandUI.Ribbon"
                Sequence="10001"
                Title="New myApp Form">
    <CommandUIExtension>
      <!-- 
      Update the UI definitions below with the controls and the command actions
      that you want to enable for the custom action.
      -->
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.Documents.New.Controls._children">
          <Button Id="Ribbon.Documents.New.myAppNewFormActionButton"
                  Alt="New myApp Form"
                  Sequence="100"
                  Command="Invoke_myAppNewFormActionButtonRequest"
                  LabelText="New myApp Form"
                  TemplateAlias="o1"
                  Image32by32="myAppApplication/Images/2014-myAppLogoBug-onwhite-32.png"
                  Image16by16="myAppApplication/Images/2014-myAppLogoBug-onwhite-16.png" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="Invoke_myAppNewFormActionButtonRequest"
                          CommandAction="~appWebUrl/Pages/Default.aspx?Action=New&amp;Source={Source}&amp;ListURLDir={ListUrlDir}"/>
      </CommandUIHandlers>
    </CommandUIExtension >
  </CustomAction>
</Elements>

I've tried investigating such as dimensions, sizing, image formats and nothing works. I know it's some kind of location url that I'm giving is probably the issue here but it resides in the standard image folder where everything else is.

Thanks in advance for any helpful input.

Answer 1

Convert your images to base64 strings, then use them for image url.

For example:

Image32by32="data:image/png;base64,iVBORw0KGgoAAAANSU...o+UAAAAASUVORK5CYII="
Image16by16="data:image/png;base64,iVBORw0KXRFEEAANSU...o+UAAAAUFMPFRK5CYII="