I am trying to figure out why my SVG icons are not displaying in Chrome. I am calling the svg with a standard <image src=... />, and I am able to see the image in dev tools (dev tools) and by visiting the direct path. I am also able to see the svgs in any other browser.
I've tried:
Saving the svg in Illustrator with "Embed" instead of "Link" : Chrome not rendering SVG referenced via <img> tag
Explicitly registering SVG mime type
Using Rails' <%= image_tag %> ERB helper
Using SVG export settings suggested by Adobe: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
Here is my view:
<a class="collapsed accordion-box">
<div class="panel-heading">
<img class="collapse-bullet" src="<%= asset_path 'blue-right-bullet.svg' %>"/>
</div>
</a>
Edit:
Found that other random SVGs show up fine:
This one is working: https://goo.gl/Hcs7Sx (white on white)
This one does not: https://goo.gl/WGkY3r
Both are called with <img src="..."/> via the <%= image_tag %> helper
Related
I have an email template where I want to serve a static png file, I have tried every possible method, but it is still broken in the email.
src/resources/templates/emailTemplates is the directory for my thymeleaf template file and src/resources/assets is the directory of my logo.png file
This is my html code:
<a target="_blank"
th:href="${WebAppUrl}">
<img
th:src="#{../../assets/logo.png}"
/>
</a>
I have tried adding the src too, tried cid etc. It's still not working.
So in my app i have a card where i want to dynamically set the background image via ActiveStorage like so:
<div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">
</div>
however, the image is not visible. Inside chrome i also get in the element.style property "invalid type property" as an error.
If i inspect the card element, the url is loaded like so:
`background-image: url(/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png)`
Taking the url and adding localhost:3000 to it loads the image:
localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png
Rendering the image normally inside an img tag works fine:
<%= image_tag(post.images.first) %>
Also, changingrails_blob_path to rails_blob_url makes no difference at all. The only change is that there is a localhost:3000 added to the url in rails_blob_url:
http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png
Adding a height/width to the card class results also in no difference.
Here is a reference i've found, seems like they are using the same approach as i do: Ruby on rails 5.2 - background image with active storage
Any ideas where the problem might be?
Thanks in advance everyone!
Greetings!
Thanks everyone for all of your input!
I was able to fix it. Just in case someone runs into the same issue:
Add single quotes to your path:
Solution:
<div class="card" style="background-image: url('<%= rails_blob_url(post.images.first) %>'); height: 100px; background-position: center;">
For comparison (before):
<div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">
Double quotes don't work in this example.
This would be probably not even an issue if i just would have used the scss file instead of adding it directly to the div.
Cheers!
I have the following Rails view in an ERB template where I set an inline style background image.
(The url is hard-coded for demonstration, but in reality it's generated via a paperclip attachment in my Photo model (e.g. photo.source.url(:medium))
<% url = "/system/photos/sources/000/000/008/medium/20160820_131939" %>
<div class="photo" background-image: url(<%= url %>);>
</div>
This ends up rendering the following <div>
Copying the above from Chrome's inspector reveals that it's being generated as key-value pairs
<div class="photo" background-image:="" url(="" system="" photos="" sources="" 000="" 008="" medium="" 20160820_131939);="">
</div>
Why does Rails do this? It seems to be trying to escape the forward slashes in the path?
I tried various forms of html_safe and escaping/unescaping, but no luck.
image_path and asset_path aren't applicable here because my path is generated by the paperclip gem which will correctly yield the right path in all environments.
Thanks!
The background-image property is CSS and needs to be within a style attribute.
i.e. <div class="photo" style="background-image: url('<%= url %>');" >
I want to create a picture management through my ActiveAdmin administration panel.
I use Carrierwave to upload images from my administration panel, however I fail to display these images as background-image within my CSS code... :/
...because of the following error:
couldn't find file '<%= Image.find(1).path %>'
Here is my CSS:
header{
background-image: asset-data-url("<%= Image.find(1).path %>");
}
My HTML:
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>Your Favorite Source of Free Bootstrap Themes</h1>
<hr>
<p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
Find Out More
</div>
</div>
And the image administration view:
I don't understand how do I link my image to the background-image CSS property?
Calling Rails Database queries in CSS stylesheet will not work. Instead you can rework on the HTML code like the below,
<header style="background-image: url(<%= Image.find(1).path %>);">
and remove the background image code in the CSS.
I am building a rails app in Rails 4.0.0 and my images work just fine in production. I am using this code:
<img alt="" src="assets/ski-large2.jpg">
But when I push it to Heroku the images do not appear. I have tried changing the path to the following:
<img alt="" src="/app/assets/ski-large1.jpg">
Still does not work. In my console I get 404 file not found errors.
Any ideas?
Some recommendations.
place images under assets/images directory
instead of explicitly using <img></img> tags use:
<%= image_tag 'ski-large1.jpg' %>
<%= image_tag 'ski-large2.jpg' %>