Why is the SVG image not appearing in my embedded app?

/index.js

import React from 'react';
import { EmptyState, Layout, Page } from '@shopify/polaris';
import { ResourcePicker, TitleBar } from '@shopify/app-bridge-react';

const img = 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg';

class Index extends React.Component {
  state = { open: false };
  render() {
    return (
      
    );
  }
  handleSelection = (resources) => {
    const idsFromResources = resources.selection.map((product) => product.id);
    this.setState({ open: false });
    console.log(idsFromResources);
  };
}

export default Index;
1 Like

I’ve got the same issue, ever since installing bridge

1 Like

I’ve discovered that Polaris isn’t auto sizing SVG images, use a different image type and it will load perfectly

1 Like

good to hear that, I will try that.> > thanks :folded_hands: :folded_hands: :folded_hands:

I tried “.webp” no luck so far !

Try changing your const img to https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png

1 Like

If you’re on a trial plan, then you can upload only the following file formats:

  • JS
  • CSS
  • GIF
  • JPG
  • PNG
  • JSON
  • CSV
  • PDF

I think that’s why SVG images are not showing up.

1 Like