images in vendor .css file are not being loaded on Heroku

https://github.com/christoph88/kratos/tree/create-landingpage

Struggling to display images from CSS file in production on Heroku, despite working fine on my development server.

Attempts made:

#config/environments/production.rb
config.assets.compile = true
config.assets.digest = true

#cmd
rake assets:precompile RAILS_ENV=production
git add. 
git commit -a -m "Your Commit"
git push heroku master
heroku run rake assets:precompile --app your_heroku_app

No success with the above steps.

The images are saved in assets/images folder, while the CSS file that references them is located at /vendor/stylesheets/landingpage/style.css

Since it's a .css file, I am not using ruby or sass helpers for images, just simple url(bgTop.jpg)

Even tried changing the file extension to .css.scss and using image-url("bgTop.jpg") helper without any luck.

Answer №1

After some troubleshooting, I managed to get everything working by simply renaming my css file to .css.scss and utilizing the image_url() helper function. It was also necessary for me to specify the subdirectory within the helper like image_url("landingpage/bgTop.jpg").

In addition, I had to make sure that all images subdirectories were included in the asset pipeline.

In my application.rb file

# Add all asset pipeline images sub folders
    Dir.glob("#{Rails.root}/app/assets/images/**/").each do |path|
      config.assets.paths << path
    end

I also had to tweak some settings in production.rb

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true

  # Generate digests for assets URLs.
  config.assets.digest = true

Answer №2

To apply styling with the correct path, ensure to include the complete URL in your CSS code, including the heroku domain.

For example:

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

Angular Flexbox causing alignment problem in CSS styling

I am working on an HTML project that includes Angular FlexLayout components. <div fxLayout="column"> <div fxLayout fxLayoutAlign="space-between"> <span > 3123131 </span> <span > ...

Conceal your password using HTML techniques

My goal is to hide passwords from being visible unless a user hovers directly over them. I've tried using the code below, but the hover effect isn't working as expected - either the password disappears completely or remains visible at all times. ...

React - Material UI Divider not centered

Is the title says - my divider is not centered in the middle of my text. The current result displays a misalignment: https://i.sstatic.net/0FjKN.png However, I am aiming for my divider to be placed in the center like this (refer to red line): https://i. ...

Troublesome Display of Badges in Bootstrap 5

My goal is to include a badge on a label, however all it does is change the text color to white <asp:Label CssClass="badge badge-pill badge-success" ID="Label1" runat="server" Text="Label"></asp:Label> ...

Ways to expand the dimensions of a Popup while including text

I am using a bootstrap modal popup that contains a Treeview control in the body. The issue arises when the node's text width exceeds the popup's width, causing the text to overflow outside of the popup. Is there a way to dynamically adjust the ...

Footer division misbehaving

My goal is to add a footer to my website that includes a text field, but for some reason I'm encountering an issue with two of my divs not cooperating. You can observe this problem in this JSFiddle. Here is the CSS code for the footer: .footer { b ...

Instant border color activation for hamburger icon in Bootstrap

Whenever I click on the hamburger icon in a Bootstrap 4 page, it briefly shows a colored border when activated but then disappears. Is there a way to customize this color or remove it completely? You can see exactly what I'm talking about in this unli ...

What is the best way to resize an image to fit neatly within a specified frame?

In my CSS, I have implemented two breakpoints: For iPhones: Only the resume content should be visible without any image - this is working fine. For desktops: The image should be aligned to the left side of the resume content. However, I am encountering a ...

Why don't inline style changes implemented by JavaScript function properly on mobile browsers like Chrome, Dolphin, and Android?

View the jsFiddle here Issue on PC/Windows browser: When performing action, h1 header "gif" disappears and video starts playing. Problem on mobile devices: The gif does not disappear as expected but the video still plays indicating that JavaScript is fun ...

Can I adjust the card cover image in Ant Design to automatically fill the available space?

I am currently facing a challenge while working with Ant Design. I am trying to make my card cover image automatically resize and occupy the entire container, but unfortunately, I have not been successful in achieving this. Let me illustrate what I am aim ...

"Is it possible to conditionally render a component depending on the state in

One of the challenges I'm facing is customizing a filter icon from MaterialUI. My goal is to change its color to black when a checkmark is checked, and adjust its position accordingly. Additionally, when a box is checked, it should fill in setFilters. ...

I'm having trouble with my carousel. I suspect it's the "link-rel" in the head tag that's causing the issue

Having trouble with my carousel - it's not navigating properly. When I check the console, it shows: Failed to find a valid digest in the 'integrity' attribute for resource '' with computed SHA-256 integrity 'YLGeXaa ...

How can you ensure that text in a container automatically moves to a new line and causes the container to expand downward if necessary, when

Are you searching for a way to make text inside a container wrap to a new line and have the container expand downwards if needed? Update <div class="modal hide fade" id="modalRemoveReserve" style="display:none;"> <div class="modal-header"&g ...

Is there a way to display menu items in a list when hovering over the parent element using CSS?

Is it possible to make the code below run when hovering over (#cssmenu ul > li > ul > li ) with the mouse? #cssmenu ul > li > ul > li > ul { right: 1170px; } ...

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

In my current project, using gwt-bootstrap3, I have been attempting to conditionally remove the menu arrow from a Select box. I have experimented with various methods such as: <select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showM ...

Guide to utilizing the scrollspy feature in Bootstrap 4

Looking for guidance with HTML, Bootstrap, and CSS. I'm revamping a website page by implementing scrollspy in a list. The HTML is generated by R using the postcards package. This is my HTML code which utilizes Bootstrap 3.4.1. Transitioning to newer ...

Adjust the height of a <div> element to fit the remaining space in the viewport or window automatically

I am working with the following HTML code: <html> <BODY> <DIV ID="holder"> <DIV ID="head_area">HEAD CONTENT GOES HERE....</DIV> <DIV ID="main_area">BODY CONTENT GOES HERE</DIV> ...

The dropdown menu appears to be malfunctioning

I am currently developing a website for our family business and encountering some challenges with implementing a dropdown menu. Specifically, I am attempting to link the 'plant list' item to the 'plant list intro' page and then have it ...

Ways to correct a jQuery error

Recently stumbled upon this code snippet on codeply and decided to try it out in Visual Studio. Oddly enough, everything appeared fine on the snippets page, but when I ran it on my own computer, I encountered this https://i.sstatic.net/wmGII.png. It's ...

Attach the common.sass stylesheet at the beginning of React components for consistent styling

Currently, I am in the process of developing a react application that utilizes SASS for styling and is served using webpack-dev-server. A few components and a portion of the directory structure appear as follows: ├── App.js ├── components │ ...