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

The (ReactJS + Redux) form fails to load when the /new segment is appended to the URL

I'm currently working on a project using React, Redux, and Rails. I've encountered an issue with loading the form. In my App.js file, I have set up a Router that defines the routes. import React, { Component } from 'react'; import { Br ...

javascriptreactjsreact-reduxreact-router

Providing properties to the main Vue.js components

An Issue I'm Facing I am currently attempting to pass a prop to my root constructor. To achieve this, I have been exploring the use of propsData, which I learned about from this resource: var appComponent = Vue.component('app', require(&ap ...

javascripttypescriptvue.js

"Encountering a Problem with Assigning Variables in Vue

My issue revolves around the integration of VueJs, Vue-Resource, and Laravel. The problem occurs when attempting to assign a local variable to response data received from an AJAX request using vue-resource. Code Javascript <script> flags_ ...

javascriptlaravelvue.jsvue-resource

Encountered a MySQL error while attempting to insert an image into the database

I have a task to work on a website where users can upload product images that will be stored in a MySQL database. The code for my HTML form is: <FORM action="testimage1.php" ENCTYPE="multipart/form-data" method="post"> <div st ...

phpmysqlhtmlcss

Utilizing GeoLocation in JavaScript: Implementing a Wait for $.ajax Response

Whenever I make an AJAX POST request to my backend server, I aim to include the latitude and longitude obtained from the navigator. However, it seems like the request is being sent in the background without waiting for the navigator to complete its task. ...

javascriptjqueryajax

What is the best approach to link an HTML document to a MySQL Workbench server utilizing JavaScript, Ajax, and PHP?

On my HTML page, users can enter the name of a movie and if it is found in the database, the name will be displayed. I am attempting to establish a connection to the MySQL Workbench Server using JavaScript, Ajax, and PHP. This is what I have implemented s ...

javascriptphphtmlajaxmysql-workbench

Is there a tool that can help pinpoint the original collection for shared elements across multiple collections?

When given multiple collections/arrays, I am interested in identifying the common elements and which collections they belong to. This request is somewhat similar to this query, but there may be matching elements between collection1 and collection3, or eve ...

javascriptjquerynode.jsarrays

Validating date inputs with ng-change in AngularJS

I am currently utilizing AngularJS along with AngularJS bootstrap within my webpage. One of the components I have is a date picker directive that is structured like this: <div class="form-group {{dateStatus.class}}"> <p class="input-g ...

javascriptangularjsdatepickerangular-ui-bootstrapangularjs-ng-change

Altering the dimensions of a <div> based on the retrieved data

I am currently retrieving data from an API and displaying certain properties using mapping. I would like to adjust the width of the component based on the value of these properties. <h5> <span className="viewcount" ref={boxSize}> ...

javascriptcssreactjs

Sorting items using jQuery filter

I am working with two sortable div containers that are connected using connectWith. Both containers contain draggable items that can be moved as desired. These items have specific classes such as group1 and group2. Let's refer to the containers as con ...

javascriptjqueryhtmljquery-ui

Using HTML and C# to Deliver Emails

I've encountered a challenge with my HTML page that includes a textbox for users to input their email. When the submit button is clicked, an email should be sent to a specific email address defined in the code, and a pop-up box indicating "Email Sent" ...

c#javascripthtmlemail

Managing numerous API requests in React Native

As I work on implementing a search field, I've encountered a challenge. Whenever a user enters text in the search field, a timer resets to 300 ms before an API call is sent to fetch autocomplete results. After receiving these results, the app then wai ...

javascriptjsonnetworkingreact-native

Modify the event from creating a table on click to loading it on the page onload

Hey there, friends! I've been brainstorming and came up with an idea, but now I'm stuck trying to switch the code to onload(). I've tried numerous approaches, but none seem to be working for me. Below is the code I've been working wit ...

javascriptjson

Filtering an array by a search term

How do you filter an array based on a specific search term? For example, if we have an array [Tom Harry, Tom John, John Glen, Tom Harward] and we search for "Tom H," then only Tom Harry and Tom Harward should be the output. [Tom Harward, Tom Harry]; Usin ...

javascript

Using a dynamic image source in an Ionic 3 background

I am using ngFor to display a list of posts, each of which should have a unique background image. The getBackgroundStyle function is responsible for extracting the URL of the image from the post array. <div class="singlePost" *ngFor="let post of da ...

javascriptcssangularionic2ionic3

Enhancing User Experience on Android Devices: Automatic Website Zoom-In Feature for Responsive Design

For the first time, I am delving into creating a responsive website design. I seem to be encountering difficulties when it comes to smartphones. I have been using the following meta-tag to ensure that the website loads "zoomed in". (I found this method on ...

androidhtmlcssviewstate

What are some ways to decrease the dimensions of my dateTimePicker?

I'm looking to decrease the dimensions of my datetime picker box. Here's an image of my current dateTimePicker: https://i.stack.imgur.com/MeJlq.png Below is the component I'm using: import React, { useState } from 'react'; import ...

cssreactjsredux-formreact-bootstrap

The Discord.js error message popped up, stating that it was unable to access the property 'then' since it was undefined

I'm currently working on implementing a mute command for my discord bot, but I'm encountering an error that says; TypeError: Cannot read property 'then' of undefined I am unsure of what is causing this issue and would greatly apprecia ...

javascriptnode.jsdiscorddiscord.jsbots

VueJS Array Index causing unexpected output

I have been developing a unique poetry application that pulls in poetry using an API call. To fetch the data, I am utilizing the axios library and using v-for to render the data. The index from v-for is used to load the image for each respective poem. My ...

javascriptvue.jsaxios

How to target the following sibling element (not a child) with CSS

I am working with the following HTML structure: <div class="col-sm-12"> <input id="my_id"> <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;"> </div> </div> How can I target and change ...

htmlcss