SVG file not found

[george-norris-salesforce]

Using = inline_svg_pack_tag 'javascript/components/images/calc-logo-square.svg'

getting a SVG file not found

Using Webpacker, latest Rails

default: &default
  source_path: client
  source_entry_path: bundles
  public_output_path: assets/bundles # outputs to => public/assets/bundles
  cache_path: tmp/cache/webpacker
  cache_manifest: false

SVG is under client/javascript/components/images/calc-logo-square.svg

[connorshea]

For what it's worth, my icons are at app/javascript/icons/trash.svg and I can get icons to render with inline_svg_pack_tag("media/icons/trash.svg"). You need to run bundle exec rake assets:precompile first for webpacker to pick them up, though. I'm not sure of a workaround for that problem currently. Also, I don't fully understand why it needs the media/ prefix. 🤷‍♂

[jamesmartin]

This seems like it might be a duplicate of #109, which also suggests a fix. There's also an open PR (#100) that partly addresses the media prefix path and just needs some tests before it can be merged. If anybody feels like they want to take this on, I'd appreciate the help. 🙏

[kylefox]

We're actually seeing a similar issue, but with the inline_svg_tag (asset pipeline)

<%= inline_svg_tag 'logo.svg' %>

which renders:

<svg><!-- SVG file not found: 'logo.svg' --></svg>

What's confusing is this problem only happens sometimes, and I cannot figure out why.

Our application uses both inline_svg_tag (asset pipeline) and inline_svg_pack_tag (webpacker). I'm starting to wonder if the changes I introduced to support both asset pipeline and webpacker in the same application are not thread-safe 🤔

For example, when inline_svg_pack_tag is executed, it temporarily sets InlineSvg.configuration.asset_finder = InlineSvg::WebpackAssetFinder. If inline_svg_tag is executed before InlineSvg.configuration.asset_finder is reset to its initial value (after inline_svg_pack_tag) completes, is it possible that inline_svg_tag is actually using InlineSvg::WebpackAssetFinder?

This might explain why (sometimes) inline_svg_tag can't seem to find SVGs in the asset pipeline...

[jamesmartin]

@george-norris-salesforce can you give v1.7.0 a try to see if that fixes the problem?

[tmikeschu]

I am experiencing this too with an upgrade to 1.7.0

Rails 5.1.7 Not using webpacker yet.

The assets are on the staging server with a hash/thumbprint suffix. So logo.svg is not found, but logo -santoehunsahous9014shaoeu.svg is on the server.

UPDATE (3/14/21)

Is there a reason to not just store the svg in an .html.erb file? That's the route I ended up taking and it works no problem. I don't mean to call out this gem, I'm curious to know if other people have tried that.

[choilive]

I'm on rails 6 and seem to be having the same issue w/ sprockets and webpacker.. I'm using inline_svg v1.7.1

[marcelokanzaki]

I was having the same issue when trying to render a file from webpacker on dev mode.

The error was that in dev mode a Tempfile is created with the contents of the real file (wich is fetched from the dev server via http), and Tempfiles try to find a file instead of creating one when there are slashes on its name.

I've submitted a PR with a fix.

[stoplion]

Changing the url to include namespace media as per Webpacker docs.

= inline_svg_pack_tag 'media/images/calc-logo.svg'

Image is in client/javascript/components/images/calc-logo.svg

Result:

• Nothing is rendered. To SVG tag.

If I change the URL to something wrong.

= inline_svg_pack_tag 'media/images/fooooobar/calc-logo.svg'

//fooooobar does not exist

Result:

• <svg> tag does get rendered
• Inside the svg tag, the following text appears <!-- SVG file not found: 'media/images/fooobar/calc-logo.svg' -->

[arusa]

I am desperately trying all variants to load an svg inline since at least an hour and nothing works. Always <!-- SVG file not found...

I think the documentation needs a few examples where images should be and how to load them with those paths.

I am using webpacker 6 so I started with the SVGs in packs/images/abc.svg and loading them using:

inline_svg_pack_tag "abc.svg"
inline_svg_pack_tag "images/abc.svg"
inline_svg_pack_tag "packs/images/abc.svg"
inline_svg_pack_tag "app/packs/images/abc.svg"
inline_svg_pack_tag "packs/media/images/abc.svg"
...

Then I tried switching to the sprockets function and moving the SVGs to app/assets/svg/abc.svg

inline_svg_tag "abc.svg"
inline_svg_tag "svg/abc.svg"
inline_svg_tag "assets/svg/abc.svg"
inline_svg_tag "app/assets/svg/abc.svg"
...

Then I tried it according to a naive file finder (/public/assets/...) and moving the files to public/assets/abc.svg, but that also doesn't work.

[arusa]

I am sure it also didn't work using inline_svg_pack_tag "media/images/abc.svg" but now suddenly it works after I tried loading that using asset_pack_path

[jamesmartin]

I am sure it also didn't work using inline_svg_pack_tag "media/images/abc.svg" but now suddenly it works after I tried loading that using asset_pack_path

Glad it's working for you now. 👍

I think the documentation needs a few examples where images should be and how to load them with those paths.

Great idea! ✨ Please feel free to open a PR against the README if you have any suggestions for how to improve the documentation with examples. 🙏

[arusa]

Yes that would be a good idea. I would suggest examples in form of a table showing "if svg is located in directory xyz you can load it with inline_svg_tag 'abc', but unfortunately it can't find the svgs anymore after deploying to the staging server. It just doesn't work for me, I don't know where to put the SVGs and how to include them to make it work. I would prefer a method where the files are just lying around statically, but the only way to make it work was using webpacker and even this is now broken again after deploying to RAILS_ENV "production"

[jamesmartin]

@arusa sorry to hear you're still having trouble. By default there are two ways that this gem finds your files:

Webpack

If you're using Webpacker, the file lookup varies between development and production mode:

1. In development mode, files are loaded from the Webpacker development server
2. In production mode, files are loaded based on the value of Webpacker.config.public_path

https://github.com/jamesmartin/inline_svg/blob/17ae73a8eb7ede3c914cdd2ecafa82a2db9293b7/lib/inline_svg/webpack_asset_finder.rb#L13-L19

Non-Webpack

If you're not using Webpacker, the file lookup uses the asset pipeline to fetch either the precompiled asset (often configured in production environments) or falls back to a static path based on your Rails.root directory.

https://github.com/jamesmartin/inline_svg/blob/17ae73a8eb7ede3c914cdd2ecafa82a2db9293b7/lib/inline_svg/static_asset_finder.rb#L18-L26

I think the next step in debugging this in your production application is to figure out the value of the following configuration options:

• Webpacker.config.public_path
• Rails.application.config.assets.compile
• Rails.application.assets_manifest
• Rails.root

Hopefully this will help you to figure out why the gem can't find your SVG files.