Is there no sign of rails being utilized in production?

There are some classic image png files located in app/assets/images/...

However, in production, after running 

rake assets:precompile

The images do not appear! Upon inspecting the CSS source code, I noticed that 

.logo {
    background-image: url("/assets/logos/logo.png");
  ... }

the same code is present in my css file.

But during assets precompilation, I observed:

 /var/www/demos/public/assets/logos/logo-741199bb95821c02bca7c68ca66ff5f5.png

So why doesn't Rails automatically update the link name with the added hash?

If I open a new tab with the direct URL :

http://domain.com/assets/logos/logo-741199bb95821c02bca7c68ca66ff5f5.png

it works fine...

How did I miss setting up this automatic link modification?

cssimageruby-on-rails-4sassassets

Answer №2

Here's a helpful tip:

To include an image in your CSS.SCSS file, use the following code:

asset-url('relative/path/image.png')

When working with views, you can use the code below to reference the image:

<%= image_path('relative/path/image.png') %>

You can also utilize the image_tag method for automatically generating the correct path for the image tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide for updating the background color, font color, and border color in Material UI's autocomplete textfield

How can I customize the appearance of this material-ui autocomplete textfield (combobox) by changing the background color, font color, and border color using CSS? Here is what I have attempted so far: <Autocomplete disablePortal id=" ...

cssreactjsmaterial-ui

Changing the cursor while the onDrag event is active in ReactJs

I want to implement Drag functionality on certain elements in my application, but I am facing an issue where the cursor changes during dragging. How can I change the cursor specifically when onDrag is active? ...

javascriptcssreactjs

Troubleshooting layout problems caused by positioning items at window height with CSS and jQuery

At this moment, my approach involves utilizing jQuery to position specific elements in relation to the window's size. While this method is effective when the window is at its full size, it encounters issues when dealing with a debugger that's ope ...

javascriptjqueryhtmlcss

Aligning Checkbox Labels for Web Forms

Can an image convey more than a thousand words? I'm looking to align the second (and following) lines with the first one. Any suggestions? Html stands for <input><span>text</span> ...

htmlcss

Difficulty arises in designing a tableless layout due to the issue of auto

Wondering why my page is not expanding with its content? Check out my demo on Fiddle http://jsfiddle.net/msas3/. The light blue area should determine the overall height of the page. ...

csslayoutcss-floathtml

Determine whether to show or hide a div based on the width of the

Is there a way to dynamically hide a div using Bootstrap 4 based on the screen width? Can this be achieved without using JavaScript? I am particularly interested in hiding certain text elements that are not relevant on smaller screens, such as mobile de ...

csshtmltwitter-bootstrap-4-beta

The collapse component from bootstrap is not visible due to an overlapping button

I am currently working on a responsive calendar featuring full-width buttons for events, accompanied by additional information displayed using the collapse component below. However, I am facing an issue where the button overlaps with other elements, preven ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Module 'gulp-sass' is nowhere to be found

Hey there! I'm encountering an issue while trying to run gulp, and it keeps showing this error message. 10:15:04 portfolio$~gulp module.js:549 throw err; ^ Error: Cannot find module 'gulp-sass' at Function.Module._resolveFilen ...

node.jsnpmsassgulp

The Colorbox feature showcases images in their binary data format

I'm currently experimenting with using Colorbox to enhance a website that is being built with Backbone.js. Within my code, I have a straightforward image tag set up like this: <a class="gallery" href="/document/123"><img class="attachment-pr ...

javascriptimagebackbone.jsbinarybase64

Concerns arise regarding the implementation of an image slider using HTML and CSS

Hey guys, I've created an image slider, but I'm facing an issue where the first click doesn't trigger a smooth animation. Instead, it jumps to the target without any transition. I want a seamless change of images, but right now it's jus ...

htmlcssanimationslider

Guide to pinpointing a location with Google Maps

I am currently working on setting up a contact page that includes Google Maps to show the location of a meeting place. Here is the code I am using: JavaScript (function(){ document.getElementById('map_canvas').style.display="block"; var ...

javascripthtmlcss

Animating the height with jQuery can result in the background color being overlooked

For those curious about the issue, check out the JSFiddle. There seems to be an anomaly where the background of the <ul> element disappears after the animation on the second click. Oddly enough, even though Firebug shows that the CSS style is being a ...

jqueryhtmlcssjquery-animate

When the children within a CSS container are floated, set the height of the container to

I've established a simple layout <div class="container"> <div class="sidebar"> </div> <div class="content"> </div> <div style="clear:both;"></div> </div> where .sidebar and .content ...

cssheight

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Check out my Fiddle. Beneath Dropdown1 lies a single-column list of actions. I'm looking to expand this list across multiple columns, like 5 or the width of the page. I'm hoping there's a Bootstrap CSS class I can use for this, but I migh ...

jqueryhtmlcsstwitter-bootstrap

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Here is the structure of my CSS and HTML: #TopBar{ display: flex; justify-content: space-between; z-index: 1; position: fixed; top: 0px; left: 0px; background-color: rgb(25,25,25); height:115px; width: 2000px; } #Logo{ top: 0px; height: 110px ...

javascripthtmlcsswebflexbox

A linear gradient effect originating from the center/middle of the background

Is it possible to create a linear-gradient background that starts from the center or middle of the screen? This is the CSS I am currently using: body { display: table; width: 100%; height: 100%; margin: 0 auto; background-repeat: no-r ...

htmlcssbackgroundlinear-gradients

Responsive div that reacts to scrolling

I am looking for a div that can dynamically change its position as I scroll up or down the page. For example, it could start 30px from the top but then move to 100px as I scroll down further. This div will be located on the right-hand side of my page, clo ...

javascriptjqueryhtmlcss

Modify the color of the background for a flex-wrap list

I am facing a situation where I have a list with an unknown number of items, but I need to control the height of its container. To achieve this, I am using flex-flow: wrap column to split the list. The list starts off hidden and is displayed using jQuery&a ...

cssflexbox

Container filled with a table element

My challenge involves a container grid with 3 div flex subelements. The first is the fixed header, the second is the body, and the third is the fixed footer. Within the body, there is a table. What I want to achieve is that when I resize the window, the ta ...

htmlcssflexboxoverflowcss-grid

Optimizing font size and placement with media queries

I am looking to scale some text and position it over an image on mobile devices. <style> #rcontainer { height: 340px; width: 100%; position: relative; } .rtext span { position: absolute; bottom: 130px; font-family: "Geo ...

cssresponsive-designposition