Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web part base 64 icons still do not render #1834

Open
hbgeorgian opened this issue May 10, 2018 · 8 comments

Comments

@hbgeorgian
Copy link

commented May 10, 2018

Category

  • Question
  • Typo
  • Bug
  • Additional article idea

Expected or Desired Behavior

Web part icons defined in base 64 as described in the SPFx documentation page Configure web part icon (section Using a base64 encoded image) are displayed properly.

Observed Behavior

Web part icons defined in base 64 as defined in the mentioned article are not displayed at all in the web part picker. Unlike bug #1124, icons are not displayed properly in the local workbench.

Looking at the URL generated for the icon, the img src attribute appears to be prefixed with https://localhost:4321/ before the base64 encoded image. In fact, removing the https://localhost:4321/ from the src attribute renders the icon as expected.

For example, if source is:
src="https://localhost:4321/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwM..."

Replacing it for:
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwM..."

will solve the issue.

The same behaviour can be observed on the local workbench and the hosted workbench.

Steps to Reproduce

  1. Create an SPFx web part

  2. Following the instructions found on https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/configure-web-part-icon, set the iconImageUrl to a base64 image. For example:
    "iconImageUrl": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDEwLjU4IDcuNDEiPjxwYXRoIGQ9Ik0yLjQ4LS4wMVYuNUgxLjJ2Ni4xNWg1LjcyVjYuM0gxLjU0VjIuMmg2LjR2Mi44OGguMjVWLjVINi45MVYwaC0uMzZWLjVIMi44MlYwaC0uMTN6bS0uOTQuODVoLjk0di40M2guMzRWLjg0aDMuNzN2LjQzaC4zNlYuODRoMS4wM3YuOTRoLTYuNHYtLjQ3eiIvPjxwYXRoIGQ9Ik03LjIyIDUuNjh2LS40M2EyLjE2IDIuMTYgMCAwIDEgMi4xNyAyLjE3bC0uNDUtLjAxYy4wMi0uNy0uNDktMS43LTEuNzItMS43M3ptMCAuNzJ2LS40M2MuOTIuMDUgMS40My43IDEuNDQgMS40NWgtLjQzYy0uMDEtLjY2LS40NS0xLTEuMDEtMS4wMnptLjYuN2EuMy4zIDAgMCAxLS4zLjMuMy4zIDAgMCAxLS4zMS0uMy4zLjMgMCAwIDEgLjMtLjI5LjMuMyAwIDAgMSAuMy4zeiIvPjxwYXRoIGQ9Ik0yLjQ4LS4wMVYuNUgxLjJsLjAzIDIuMjMtLjAzIDMuOTJoNS43MlY2LjNIMS41NFYyLjJoNi40djIuODhoLjI1Vi41SDYuOTFWMGgtLjM2Vi41SDIuODJWMGgtLjEzem0tLjk0Ljg1aC45NHYuNDNoLjM0Vi44NGgzLjczdi40M2guMzZWLjg0aDEuMDN2Ljk0aC02LjR2LS40N3oiLz48cGF0aCBkPSJNMi41IDIuNzNoMS42OHYuMzZIMi41em00LjA3LjM2aC4zNHYyLjI4aC0uMzR6bS0xLjM3IDBoLjM1djIuMjhINS4yem0wIDIuMjhoMS43MXYuMzZoLTEuN3ptMC0yLjY0aDEuNzF2LjM2aC0xLjd6Ii8+PHBhdGggZD0iTTMuODYgMy4xaC4zNHYyLjI3aC0uMzR6bS0xLjM2IDBoLjM0djIuMjdIMi41em0wIDIuMjdoMS43di4zNkgyLjV6bTAtMi42NGgxLjd2LjM2SDIuNXoiLz48L3N2Zz4=",

  3. Run gulp serve

  4. From your local or hosted workbench, open the Add New Web Part dialog.

  5. Find your custom web part. The icon will be blank.

  6. Using the developer tools, inspect the icon for your web part.

  7. Find the <img class="ms-Image-image ..." element

  8. The src attribute will be prefixed with https://localhost:4321

  9. Remove the https://localhost:4321 (leaving everything after, and including, the "data:image"

  10. The icon will show

@Zhephyr54

This comment has been minimized.

Copy link

commented May 23, 2018

Still bugged 05/23/18.
It should be relatively easy to fix and it's quite important since I don't know if there is any workaround !

@wobba

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2018

Agree, supporting something beside image/png would be very useful.

@jasonds

This comment has been minimized.

Copy link

commented Nov 1, 2018

@VesaJuvonen - I believe this issue is closely related to issue 1124, which was closed in April. I'm still seeing this behavior in deployed environments as well. Are you able to confirm if this is still a known issue?

@expiscornovus

This comment has been minimized.

Copy link
Contributor

commented Dec 21, 2018

Any news on this issue? I can still reproduce this issue. When I use a base64 encoded image it doesn't render.

But I am getting an sites/spappcatalog/ClientSideAssets/ea3aee20-489e-45d3-a637-c5071ede6dd7/data:image/svg+xml;base64 url when I used a base64 encoded image in my package.

@estruyf

This comment has been minimized.

Copy link
Contributor

commented Dec 21, 2018

@expiscornovus if you encode a PNG, it should work fine. At the moment, encoded SVGs are not supported.

@expiscornovus

This comment has been minimized.

Copy link
Contributor

commented Dec 21, 2018

@estruyf thanks for you quick reply! :) I will use a PNG for now.

@GrahamMcMynn

This comment has been minimized.

Copy link

commented May 9, 2019

The fix for svg will roll out in the start of June.

@hugoabernier

This comment has been minimized.

Copy link
Contributor

commented Aug 31, 2019

I can confirm that this issue is solved for base64 raster images. However, the issue still seems to occur with base64-encoded SVGs.

If you need to use an embedded SVG for your icons, you need to convert them to data URIs, not base64-encoded.

There is a web-based utility to generate data URI SVGs at https://tahoeninjas.blog/2019/08/31/fixing-base64-svg-icons-in-spfx/

I hope it helps?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.