What is an alternative way to display static images in Rails 5 without relying on the Asset Pipeline?

I developed a web-based application with the backend built on Rails 5. Utilizing AngularJS for the frontend, I opted to not use the Asset Pipeline to deliver static content. Instead, I loaded all my scripts (JS & CSS) in the index.html file located within the public directory. From there, I utilized Angular's ng-route for further location management.

An issue arises when one of my HTML pages requires the inclusion of an image using the standard HTML image tag, as the server cannot locate the image file.

<img src="assets/images/logo.jpg" style="padding-bottom:20px;" />

While attempting to store the image both in the app/assets/images and public/assets/images directories, I consistently encountered routing errors indicating no route found on my Rails server console.

Following advice from various sources, I added this line to my config development.rb file:

config.public_file_server.enabled = true

However, this solution proved ineffective. How can I successfully serve images without relying on the Rails Assetpipeline?

javascriptruby-on-railsangularjsruby-on-rails-5

Answer №1

If you want to display images without relying on the asset pipeline, simply place your images in the public folder.

For example, if you have an image located at your_app/public/images/logo.jpg, you can reference it in your view using <img src="/images/logo.jpg".

Rails offers a helper method for this purpose as well, which not only generates the same code but also includes additional Rails features:

<%= image_tag('/images/logo.jpg') %>

Remember to exclude the public part of the path when referencing the image. Also, avoid creating a directory named assets within the public folder to prevent conflicts with the asset pipeline. It's recommended to choose a different name for that directory instead.

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

Developing entities in Express.js

My express app is currently fetching data from an external API through the following endpoints: api.com/companies (GET, POST) api.com/companies/id (GET, PUT) To improve maintainability and avoid code repetition, I am looking to create a model for handlin ...

javascriptnode.jsexpressmodels

What is the best way to convert a state variable into a string in this scenario?

I have encountered an issue while using the NPM package react-date-countdown-timer. The countdown timer in this package requires a specific format for implementation: <DateCountdown dateTo='January 01, 2023 00:00:00 GMT+03:00' callback={()=> ...

javascriptreactjsstringnpmsyntax

Customize the Focus event for a third-party page being displayed in an iframe

When an external page loads in an iframe, it automatically gains focus causing the page to scroll to that specific iframe. Is there a method to prevent this automatic focus override? ...

javascriptjqueryiframe

Angular 7: Resetting multiple dynamically generated checkboxes back to their original state with the click of a button

I have created a child component that contains 3 checkboxes, generated dynamically using ngFor, along with Apply and Cancel buttons. In the parent template, I include the selector tag for the child component. The parent component accesses this child compo ...

javascriptangulartypescriptcheckboxangular7

Dynamic Dropdown Validation During Form Submission

In the form, there are multiple rows displayed dynamically, each with a dropdown menu. The id for each dropdown is "ReasonCd#" where "#" increments from 0 based on the row number. By default, every dropdown has "Select Number" as the selected option, with ...

javascriptphpjqueryhtmlforms

Troubles encountered during the development of Nextjs/Javascript application

I encountered the following errors while developing my application. I am unsure of the reason behind this issue. I created a fetch request in a separate function and attempted to call this fetch function (which is structured as a custom react hook) within ...

javascriptreactjsbuildnext.js

Issue encountered while converting nested JSON objects to a java.util.Map in a Spring controller: 400 Bad Request Error

Greetings, I am a beginner in working with Spring framework. Currently, I am encountering an issue while trying to map a JSON object from Angular to a Map in a Spring controller. The code snippet of my controller is as follows: @RequestMapping(value="/Pn ...

javaangularjsjsonspringspring-mvc

Angular http service set header for put request

Struggling with a temporary solution where the goal was to include a header in an http put request with the value 'username' : 'flastname'. The plan is to set this username header just before making the $http.put call within the service ...

angularjsresthttp

Issue with Angular ng-src not able to load picture when using --livereload (REVISITED)

My Goal: My objective is to enable users to download images from the server to their device when they click on an image placeholder. The downloaded image path will then be stored in the $scope and shown to the user. Below is my controller: .controller(&a ...

angularjscordovaionic-frameworkngcordova

Timing issues with setInterval and setTimeout are causing them to execute at the incorrect moments

I am struggling with changing the background image using setInterval and setTimeout every x seconds. The issue I am facing is that the timer is not working as intended, causing images to change instantly instead. let images = ['background1.jpg&apo ...

javascriptjquery

First render does not define useEffect

Why am I experiencing an issue here? Whenever I attempt to retrieve data from my API, it initially returns undefined during the first render, but subsequent renders work correctly. const [data, setData] = useState([]) useEffect(() => { const fe ...

javascriptreactjsapi

Ways to transmit data multiple times within a single request

I'm currently developing an app using Nodejs and express, where orders can be placed for specific products. In this application, when an order is received, it is saved in the database and a PDF receipt is generated immediately. However, since generati ...

javascriptnode.jsmongodbexpressmongoose

Determine if an object hierarchy possesses a specified attribute

When passing a set of options as an object like this: var options={ sortRules:[ {...}, // rule 1 {...}, // rule 2 // etc. ], filterRules:[ {...}, // rule 1 {...}, // rule 2 // etc. ], etc ...

javascriptobjecthasownproperty

Failed to fetch user id from server using Ajax request

I am facing an issue with my form that includes a text input field and a button. After submitting the form, I extract the value from the user field and send an ajax request to ajax.php to retrieve the userID from the server. The server does return a value, ...

javascriptphpjqueryajax

What is causing the scripts to fail when I attempt to press a button?

Clicking on the button is supposed to slowly reveal phone numbers on the page. Here are the HTML Codes: <span id="show-phone-numbers" class="btn btn-success"> <i class="fe fe-phone-call"></i> Show Phone Nu ...

javascriptjquerybootstrap-5

Ensure that the Jquery inview element functions both upon initial load and as the user scrolls

I've been working on implementing the inview function by adding and removing a class to an element, but for some reason it's not functioning as expected. Can anyone offer some assistance with this? http://jsfiddle.net/zefjh/ $.fn.isOnScreen = f ...

javascriptjqueryscroll

What is the best way to incorporate JavaScript in a repeater?

I am currently working on an asp.net project that involves using a repeater. <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate> <asp:label ID="lblexp" runat="server" Text="05/11/1 ...

javascriptc#asp.netsubstring

Why does the onBlur event function in Chrome but fails to work in Safari?

I've encountered a problem with the onBlur event in react-typescript. To replicate the issue, I clicked the upButton repeatedly to increase the number of nights to 9 or more, which is the maximum allowed. Upon further clicking the upButton, an error m ...

javascriptreactjstypescriptreact-typescript

Zooming on a webpage is causing problems

One issue I'm facing is with the elements on my page acting strange when I zoom in and out. Everything seems to be working fine except for a container div that should overlay a color over the image background. When I zoom in or switch to mobile view, ...

javascripthtmlcss

Is the button failing to direct you to the intended destination?

I'm facing an issue with a button tied to a JavaScript function using onClick(); My interface allows me to ban players on a game server, but when I select anyone here: https://i.stack.imgur.com/kcE1t.png, it always selects wartog for some reason. In ...

javascriptphphtml