I'm trying to reference an image in my assets/images folder from a template and having trouble. I feel like I'm missing something very basic but don't think the asset pipeline should be coming into play here. I'm using the angular templates gem. How can I properly reference this image?
* app
* assets
* images
prof_pic.jpg
* javascripts
* templates
myHtml.html
HTML
# I've tried...
<img src="../images/prof_pic.jpg">
<img src="/images/prof_pic.jpg">
<img src="prof_pic.jpg">
If it's to do with Angular you could try using something like <img ng-src="{{location}}/image-name" /> with $location.path() and then the path to the assets directory.
Related
I'm generating a Mustache template within a controller of my rails application. I am able to generate the html just fine. My problem is that I am not able to load in images from the assets folder.
I've tried using ActionController::Base.helpers.image_tag and ActionController::Base.helpers.asset_path and then passing that in as a variable into an image tag in the Mustache template as <img src="{{ asset_path }}" /> for the asset path and the output of the image_tag as it is <div> {{ image_tag }} </div>
I know that image_tag and asset_path are picking up the image because when I put in an incorrect path it outputs an error.
Anybody have any ideas on how to link this image to the Mustache template?
This issue has been resolved. The error was not related to Mustache but to the next phase of the application which is to generate a PDF from the generated HTML.
For reference, I used Rails.root.join('app','assets','..path to image') for the image path.
I'm using Rails 4.2.3 and am trying to customize the 404 error page in public/404.html. How can I include images from the asset pipeline?
There's an excellent post how to build dynamic custom error pages. However, as described there, it requires a whole lot of changes to settings that I, as a beginner, am not ready to take. All I want to do is in my 404 page to include 2 images that are in the asset pipeline. Is there an easy way to do this?
If you want your error page to use images from the asset pipeline, then you have two options:
Use dynamic error pages (I've written a tutorial here).
Monkey patch the asset pipeline to allow non-fingerprinted assets.
Since you are ruling out option #1 for now, I think the monkey patch is the way to go. Install the non-stupid-digest-assets gem in your app. This will patch the asset pipeline so that it produces non-fingerprinted assets (in addition to the fingerprinted ones).
# Gemfile
gem "non-stupid-digest-assets"
And of course, don't forget:
$ bundle install
Then in your 404.html, just refer to the asset as if it were a static file, like this:
<img src="/assets/my-image.png">
This assumes the actual image is stored here in your project:
app/assets/images/my-image.png
Keep in mind, that content of public folder is visible to anyone.
There for, following the convention, I would create assets folder (if you don't have it already), then images and stylesheets.
And create regular html page
- app
...
- public
- 404.html
- images
- image1.jpg
- image2.jpg
- stylesheets
- style.css
Then in your 404.html you will reference it like so:
<img src="./assets/images/image1.jpg" alt=""/>
Add the images to the public folder.
Use root relative path to the images on the public 404/500 html pages.
<img src="/my-logo.png"/>
In a new application, routes that are not found are directed to the static html page found in public/404.html. As you have found this is a .html not .html.erb file which means you have to do fancy stuff to access your asset pipeline.
If you don't want to go through the trouble of creating a dynamic page, the easiest way is to copy* the two images from your asset pipeline into public/assets (or a sub-directory) and then include them with:
<img src="assets/image.jpg">
*You may also be able to use a symbolic link but it may cause problems depending on how your production server is set up.
in your 404.html add...
<head>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
</head>
<body>
<img src="simple.gif">
</body>
I have a question about using asset_sync and a Heroku CDN. In this article, it says
Make sure you’re using the Rails AssetTagHelper methods (like
image_tag). This will ensure all of your assets will reference the new
asset host.
Does that mean any plain html <img> tags or refs in my app won't work? Or maybe it's just to warn against tags with an absolute URL?
EDIT: I know I can and should use image_tag and image_path in views or css. What I'm asking is, do I HAVE to?
They will work but you will need to point it manually to where you are syncing your assets to, some bucket on Amazon S3. Not really recommended unless your assets will hardly ever change.
You configure your asset path in your production.rb config like so:
config.action_controller.asset_host = "http://assets.domain.com"
Then whenever you reference asset_path it will point to the asset on the host defined in your environment config.
Perhaps a solution (without understanding your exact problem) would be to do something like this:
<img src="<%= asset_path("image.png") %>" />
You should to use
<%= image_path("logo.png") %>
instead of
<img src="<%= asset_path("image.png") %>" />
You can more details about this helper method here. Also As specified by andrew you need to specify asset_host in you config file. Here is a small blogpost for the same
Also:
If you want to pull css background icons/images from amazon s3 then use:
background-image: image_url("icon.png"); // it requires scss extension ie saas and also you must has saas rails gem included.
I began moving all the assets in my site to S3 and ran into a problem with my asset path.
There's a WYSIWYG editor on my site that includes images by absolute path, so when you add an image, it doesn't use the rails image_tag helper but rather adds an image like this:
<img src="/system/images/image_1.jpg" />
The problem is that in production the URL /system/images/image_1.jpg leads to a non-existant file.
Naturally, two solutions are to 1) replace the URL dynamically (gsub) when it's called and 2) to loop through the database and replace the urls.
A better solution, however, would be to rewrite the /system/images/image_1.jpg url to point to S3. How do I do that?
Thanks!
Rails 3.1 now requires you to use image_tag when rendering an image using the asset pipeline.
I have built endless scroll into my application and have put the code into a js.coffee file. I wish to render a spinning loading gif whilst more products are loaded. I cannot use image_tag here as this file does not support rails code, but I have written it in here so you understand what I am trying to do.
jQuery ->
if $('.pagination').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 1200
$('.pagination').html("<%= image_tag("loading.gif") %> Loading more...")
$.getScript(url)
$(window).scroll()
Previously, I would have just written it in pure HTML, using <img src=... But this will no longer work with the asset pipeline. How can I achieve this?
Using plain HTML should work just fine.
Try using: <img src="/assets/loading.gif" /> if your loading.gif is inside assets/images.
UPDATED 21/06/2012
As per the Ruby on Rails Guide, Section 2.2.3, changing the file extension of your .js file to filename.js.erb or filename.js.coffee.erb will allow you to use embedded ruby inside your javascript.
You can then use the asset_path helper to access the path where your assets are stored.