gatsby image svg not found

Question

When trying to load an SVG image this way:

export const query = graphql`
    query {
        fileName: file(relativePath: { eq: \"logo_large.svg\" }) {
                  


        

Answer 1

Don't know if this helps, but If you are looking for a generic and dynamic Image component that takes a custom file name and acts accordingly I've put together this:

This approach considers that you have an images folder inside your src folder where you have all your images.

const Image = ({ filename, alt }) => (
   {

      // Handles SVG extension
      const extension = filename.match(/[^\\]*\.(\w+)$/)[1]
      if (extension === "svg") {
        return 
      }

      // Finds your image among all
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(filename)
      })

      if (!image) {
        return null
      }
      return (
        
      )
    }}
  />
)

Be careful that this is not optimized and queries for all of your images. If you are trying to optimize performance in every way possible this isn't the best way to go.