Having trouble getting images to load from the Assets in Rails 4?

All of my assets are organized in distinct folders:

app/assets/images/admin/*  <---- Admin Template
app/assets/images/default/* <----- Frontend Design

However, when attempting to utilize the following code snippet:

<%= link_to image_tag('default/user-photo-medium-jpg', :class => 'media-object img-circle', :style => 'width: 64px; height: 64px;'), '#' %>

The output produced doesn't load the image in our Development Environment.

<a href="#"><img style="width: 64px; height: 64px;" src="/images/default/user-photo-medium-jpg" class="media-object img-circle" alt="User photo medium jpg"></a>
cssruby-on-railsimageruby-on-rails-4asset-pipeline

Answer №1

Double check the image source which is indicating "/images/default/user-photo-medium-jpg". Confirm if the image has the correct file ending (.jpg) and not -jpg.

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

Having trouble getting CSS3 Keyframes to function properly?

Check out the following code snippet: .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } ...

javascriptjquerycssanimationcss-animations

Is there a way to prevent Javascript from modifying styles when printing?

Is there a way to prevent JavaScript from affecting styling during printing? For example, if I'm using JavaScript to hide certain content but want that content to be visible when printed. I have hidden a div using JavaScript and now I'm trying ...

javascriptcssxhtmlprinting

Leveraging .col-* within a .d-flex container in Bootstrap 4

What is the recommended practice for using .col-* as children in a .d-flex container? Should .d-flex be used with .row instead? I have noticed that the Bootstrap 4 Docs do not show any examples of using a .col-* in a .d-flex container. The layouts provide ...

twitter-bootstrapcssflexboxbootstrap-4

Text that adjusts its size based on the available space between columns within a row

I am currently developing an application using angular and bootstrap, and I have a requirement to insert a link between two columns in the third row of iteration. Here is what I have attempted so far: Html: <div class="container"> <div clas ...

cssangulartwitter-bootstrapbootstrap-4

Is there a way to dynamically alter the names of CSS files using jQuery? Just as an example, transforming "file2.css" into "file1.css"

var device = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())) if(device){ <link href="mobil.css" rel="stylesheet" type="text/css" media="screen"> } else { ...

jqueryhtmlcss

Unable to modify the background image of the button

Currently, I am working on this element I am trying to insert a background image into the "Click" button, but I am not seeing any results. Here is the HTML and CSS I am using: .cn-button { position: absolute; top: 100%; left: 50%; z-ind ...

htmlcssbackground

Enhance SVG styling by using CSS as the background

Is there a way to access SVG using CSS when using them like this? .logo { ... background-image: url("../VectorImages/logo.svg"); } I came across some scripts that claim to convert svgs to inline SVG, making them accessible for CSS. I tried it and it wo ...

jquerycsssvgsass

How can you align a button in the center relative to another button positioned above it?

I am having trouble centering a button in relation to the button above it. The image shows that the lower button is not properly centered. I attempted to fix this issue by using the following CSS: .btn { padding: 16px 22px; color: #fff; border-radiu ...

htmlcss

Utilizing Ajax to dynamically update the color of a button when it is clicked from a different device

Currently, I am developing a program for my own use within my local community theater. The setup will involve a computer in the control room (Sound Booth) and another computer backstage. My plan is to create a grid of around 10 interactive "buttons" on th ...

phphtmlmysqlcssajax

What are alternative methods for creating animations within ng-repeat loops without relying on ng-animate?

In my current project, I'm facing a challenge that prevents me from using ng-animate in certain situations because of the specific way the angular apps are initialized. As a result, I've been exploring options to animate ng-repeat loops using tra ...

jquerycssangularjsangularjs-ng-repeatng-animate

Utilize the inherited background color for a linear-gradient effect

Here is the code snippet I am working with: <label className={classes.trigger} htmlFor={uniqueId} ref={labelRef} style={{ background: val, borderColor: val }} /> This is the corresponding CSS: .trigger { display: block; posit ...

javascripthtmlcssreactjssass

The Angular 6 ngb-bootstrap modal fails to display due to conflicting bootstrap css within a div element

I've encountered numerous inquiries about modal not displaying, and although I've successfully implemented it in other scenarios, this one presents a unique challenge! In my Wordpress project, I've embedded an Angular app within the admin a ...

cssangularwordpressbootstrap-4ng-bootstrap

Tips for making an image resize automatically within a parent Grid container in Material UI

I am attempting to resize the image inside a Grid to match the size of the parent Grid. I have tried using minheight and height properties, but they do not seem to be effective. I also attempted to use a styled component for this purpose. return ( ...

cssreactjsmaterial-ui

Adjust all children's height to match that of the tallest child

My nearly completed jQuery slideshow is working well except for one issue - the height of the slideshow remains fixed at the height of the first displayed slide, causing problems. View the issue here: . I have tried different jQuery solutions from StackOve ...

jqueryhtmlcss

Adjusting the sizes of images with varying aspect ratios to perfectly fit within a div without distorting its shape

I'm currently in the process of developing my portfolio website and I am faced with creating a simplistic image browser feature. My goal is to have a container div that adjusts in size according to the browser window, allowing it to house images of va ...

javascripthtmlcss

Is there a way to prevent the slide-out bar from automatically hiding when selecting an item from its list?

I am facing an issue with my dashboard that has a slideout sidebar. Whenever I press the toggle button, the sidebar slides out as expected. However, when I click on any tab within the sidebar, it hides again. I only want it to hide when toggled. My code is ...

javascriptjqueryhtmlcss

Utilize Bootstrap to ensure that column size remains consistent at 12 on small devices, while maintaining default behavior on larger devices

I have a component that has the ability to hold any number of elements. My goal is to have the elements stack on top of each other and take up the full width of the container when the screen is small, but revert to the default Bootstrap column behavior on ...

htmlcssbootstrap-4

How did the chat sidebar disappear at Facebook when using the "zoom in" feature?

Have you ever noticed that Facebook can detect users' zoom-in level and dynamically add a .hidden_elem classname to hide the .fbChatSidebar? (See attachments below) I've done some research on this feature and came across a GitHub repository call ...

javascriptcssfacebookzooming

Personalize Dropdown Menu, determining when to initiate the hide menu action

When creating a dropdown using ul and li tags, I am faced with the dilemma of determining the ideal time to hide the dropdown menu. The dropdown menu is designed to display values based on user input as they type, updating dynamically. Initially, I had se ...

javascriptjqueryhtmlcssdrop-down-menu

Error in WordPress: The table prefix cannot be blank

While setting up WordPress, I encountered an issue during the database details input in the first step of the installation process. I am using XAMPP and have tables in my database named wordpress_tbl_table1 and wordpress_tbl_table2. I entered "wordpress_tb ...

htmlcsswordpressxampp