Rails assets folder is not directed to the specified directory in the layout file

I have a dilemma in the application layout where I'm referencing assets (js, css, and img) in the public/assets/... directory. For example:

<link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
<script src="assets/javascripts/plugins/modernizr/modernizr.min.js" type="text/javascript"></script>

However, when the page localhost/quotes/show is loaded, it attempts to find the assets at quotes/assets/... instead of just assets/... Interestingly, the assets load perfectly fine when the page localhost/quotes is accessed, as it correctly checks the assets/... directory rather than quotes/assets/...

Does anyone know how to resolve this issue? Appreciate any solutions.

javascriptcssruby-on-railspathassets

Answer №1

It is recommended not to use the full path to the assets directory when referencing assets in your code. Instead, consider utilizing stylesheet_link_tag, javascript_include_tag, asset_path, or image_tag as necessary. These methods will automatically handle resolving the correct path generated by the Asset pipeline. For more information, check out Check out http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets for a more detailed explanation.

Answer №2

One helpful tool for asset tagging is the use of asset tag helpers, which are typically necessary when utilizing sprockets or similar tools. Based on the assumption that you are using Rails 4.1+, an example in SLIM format can be provided.

= favicon_link_tag '/assets/favicon.ico'
meta name="viewport" content="width=device-width, initial-scale=1"
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'

In this example, the closest match to your query would be the favicon link tag, which also offers options for customization.

For further reference, you may consult the following documentation: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html

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

Grid sidebar using tailwindcss

I just started using Tailwind CSS, but I'm having trouble understanding how the grid system works! I want my layout to look like this: https://i.sstatic.net/hlHmy.png Here is what I tried, but it's not working as expected: <div class=" ...

htmlcsscss-gridtailwind-css

Clicking to close tabs

I am currently working on implementing a tab functionality on my website and I want these tabs to be responsive. Here is the code snippet I have been using: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.ge ...

javascriptjqueryhtmlcss

I've noticed that the NextJs router appears to be significantly slower in comparison to React

I currently have a website that is built in both React Js and Next Js. The issue I am currently encountering is that the router in NextJs is noticeably slower compared to react-router-dom. It takes almost 2-3 seconds to change the route. To experience th ...

javascriptreactjsnext.jsnext-router

Vanilla JavaScript - Conceal all remaining div elements

I have a situation where multiple divs are only visible after clicking a link. How can I ensure that when one div is clicked, all others are closed so that only the clicked one remains visible? Currently, I am using the following JavaScript: functio ...

javascripthtml

What is the most efficient method to import multiple MaterialUI components using a shared namespace without requiring the entire library to be imported

In order to prevent name mixing with other libraries, I want my MaterialUI components to be under the same namespace. For example, ensuring that <Box> references <MaterialUI.Box> and not <SomeOtherLibrary.Box>. Although it seems like a si ...

javascriptreactjswebpackmaterial-ui

Unable to execute jQuery - AJAX in PHP

Welcome_page.php <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#role").on("change", function() { alert($("#role").val()); var rol ...

javascriptphpjqueryajax

Error: Missing 1 type argument(s) in generic type definition

I've developed an abstract class structure as shown below: export abstract class CsvFileReader<T> { data: T[] = [] constructor(public file: string) {} abstract mapRow(row: string[]): T read() { this.data = this.file .split(& ...

javascripttypescript

Various degree of stacking priority ordering

I was faced with a coding dilemma that I couldn't quite figure out. The title may not give much away, but the issue lies within this code snippet: https://jsfiddle.net/bnh3487n/ div { width: 100%; } #wrapper { width: 500px; height: 500px; ...

htmlcss

The element you are trying to interact with is currently not visible, therefore it cannot be accessed

Currently, I am working on a small Test Automation project using C# with Selenium WebDriver. I have run into an issue where some WebElements are not visible or have their 'Displayed' property set to 'false'. This prevents me from perfor ...

javascriptc#selenium-webdriver

Animation of active chat list items on Whatsapp

Has anyone figured out a simple method to create an animation like the one in Whatsapp? For example, when you are on a chat screen and go back to the chat list, have you noticed how an active element is briefly highlighted in gray (to indicate which chat ...

javascriptcssanimation

Difficulty in accurately retrieving the value in a PHP echo statement using jQuery

$id = "123"; When on the page book.php, $id is passed to an external jquery-book.php file. <script type="text/javascript"> var id = '<?php echo $id; ?>'; </script> <script type="text/javascript" src="jquery-book.php"& ...

phpjavascriptjqueryajax

Setting a default value in a dynamic dropdown using AngularJS

I could really use some assistance with my issue as I am fairly new to working with AngularJS. My dilemma is related to setting the default value in a select option when there is only one item available due to it being a dynamic select option. Though there ...

javascriptangularjs

Why can't the file upload button locate its CSS styles?

Check out this jFiddle demonstrating the issue. Some of the Angular code may appear broken in the example, but that's just due to it being pasted into jFiddle; it's not an actual problem I'm facing. The CSS styles aren't working on the ...

cssangularjs

Is it possible to utilize a designated alias for an imported module when utilizing dot notation for exported names?

In a React application, I encountered an issue with imports and exports. I have a file where I import modules like this: import * as cArrayList from './ClassArrayList' import * as mCalc1 from './moduleCalc1' And then export them like t ...

javascriptreactjsmodule

Is there a simple way to display all the data from a JSON object even if the contents are unknown beforehand?

Greetings! I am Pearson's dictionary api. Here is a glimpse of what I receive from an api call: { "status": 200, "offset": 0, "limit": 10, "count": 10, "total": 135, "url": "/v2/dictionaries/entries?headword=dog", "results": [ { ...

javascriptjson

What is the process for extracting values from a Proxy object and assigning them to a local variable?

Can anyone help guide me on how to retrieve a list of devices (video and input/output audio) using navigator.mediaDevices.enumerateDevices()? I created a function that returns the result, but when I try to display it with console.log(result), I only see a ...

javascriptarraysvue.jsproxy

Making an Ajax call to a RESTful API from another domain

My Restful API functions properly when called from Postman using a specific configuration. I provide the following details on Postman to receive a response: - POST: "" There is no need for authorization. Headers: Content-Type : application/json, username: ...

javascriptjqueryjsonajax

Initiating a horizontal scroll menu at the center of the screen: Step-by

I need assistance setting up a horizontal scrolling menu for my project. The requirement is to position the middle button in the center of the .scrollmenu div. Currently, I am working with HTML and CSS, but open to suggestions involving javascript as well ...

javascripthtmlcss

SVG: spin the entire text

I need assistance rotating a list of words at an angle, specifically tilting only the characters: Here is my code: <svg width="2000" height="130"> <g *ngFor="let fruit of fruits"> <g> <text [attr.x]="fruit.x" ...

cssangularjssvg

Error: Unable to access null properties while attempting to address Readonly property error by implementing an interface

Here is the code snippet I am working with: interface State { backgroundColor: boolean; isLoading: boolean; errorOccured: boolean; acknowledgment: string; } export class GoodIntention extends React.Component<Props, State> { ... onCli ...

javascripttypescripttypeerror