Some images fail to load on Ember in the production environment

I am facing an issue with my Ember-cli 1.13 application where all images are loading correctly except those in a specific component. The component is named "list-item" and is defined as follows:

{{list-item url="list-url" name="List Name" price="240"}}

Internally, the component structure looks like this:

<a href="http://example.com/{{url}}">
  <img src="/{{url}}.png" alt='Picture of the {{name}}' />
  <p class="item-name">{{name}}</p>
  ...
</a>

However, when I build and deploy the app to Heroku, the path for the images turns out to be broken:

https://ridiculous-name-123123.herokuapp.com/list-item.png

This path is similar to localhost but with a different domain. Interestingly, all other images load without any issues when not used within components.

I am unable to figure out what could be causing this problem. Any insights would be appreciated!

javascriptherokuember.js

Answer №1

When you develop in a production environment, your assets go through a process known as fingerprinting.

The issue here seems to be that your "built" URL is linked to the unfingerprinted file. One solution could be to place these images in a separate folder and exclude them from fingerprinting in your ember-cli-build.js:

var app = new EmberApp({
  fingerprint: {
    exclude: ['myComponentImages/']
  }
});

An even better approach would be to use the full URL or apply a class that modifies the displayed image since it appears that these are static assets and not user-generated content.

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

Error: Expecting only one React element child to be passed into React.Children.only() function

I am encountering an issue while attempting to construct a web table using the antd library. The exact error message reads: "react.development.js:1251 Uncaught Error: React.Children.only expected to receive a single React element child". I have been stru ...

javascriptreactjsnext.jsantd

Is there a way to disable page prefetching for Next.js Link when hovering over it?

Whenever a link is hovered over in my production application, an XHR request is sent to the server. I need to find a way to prevent this from happening. I tried using prefetch={false} but it didn't work. Any suggestions on how to resolve this issue? ...

javascriptreactjsnext.js

Transforming JSON data into comma-delimited values (with thousands separators) using Angular 5 and ES6 syntax

Is there a more elegant method to convert a JSON response into comma-separated numbers for displaying currency purposes? Here is the code I have currently: let data = { "business":{ "trasactionTableData":[ { ...

javascriptangularecmascript-6

Trouble displaying JSON data with AngularJS $http service

Struggling to retrieve json data. Initially, I created an ajax request that functioned properly in a regular html page but failed in my angular app. As a result, I decided to experiment with the built-in $http get function. Surprisingly, no errors are thro ...

javascriptajaxangularjs

Implementing a delete functionality within a loop on a JavaScript object array

I have a JavaScript object with the following structure: var partner = { p_name: { value: partner_name, label: "Name" }, p_id: { value: partner_ID, label: "ID" }, p_status: { value: partner_status, label: "Status" }, p_email: { value: partner_emai ...

javascriptjquery

Intercepting HTTP responses to handle headers

I'm facing an issue where I am trying to retrieve a custom header sent from the server in my $http response interceptor. However, the only header that is accessible is the Content-type header. How can I troubleshoot this problem? Here is part of my $ ...

javascriptangularjsangular-http

Force restart broken socket within Node.js program using Socket.IO programmatically

I have a simple one-to-one client and server Node.js based application. The Node.js is running on Linux (Intel Edison). I am attempting to automatically reboot the Linux server whenever the socket connection is broken. Is this achievable? Below is my unco ...

javascriptnode.jssocket.iorebootintel-edison

Show or hide a div in Vuejs based on checkbox selection

I've been attempting to toggle the visibility of a container div using Vuejs with no success. I've tried two different methods, but neither seem to work for me. Here is Method 1: <body> <div class="checkbox" id = "selector"& ...

javascriptvue-componentvue.js

Tips for inheriting external UI components in vue/nuxt?

Hello, I am currently navigating the world of Vue for the first time. My project utilizes Vue2, Nuxt, and Vuetify to bring it all together. One thing I am looking to do is create a base .vue component, as well as multiple components that inherit from this ...

javascriptvue.jsvuejs2nuxt.jsvuetify.js

An error occurred with redirecting using jQuery Mobile's new method in version 1.5

Utilizing jQuery Mobile for its history state feature, I am looking to redirect users to another "page" using the jQuery method recommended in their latest documentation. p/s: I prefer the jQuery navigation method due to the hashchange/history support and ...

javascriptjqueryjquery-mobile

Unexpected error 500 (Internal Server Error) occurred due to BadMethodCallException

Using Vue 2.0 and Laravel 5.4, I am working on creating a matching system that includes a dynamic Vue component. For example, when someone likes another person, it should immediately show that the like has been sent or if the like is mutual, it should indi ...

javascriptphplaravel-5vue.jsvue-component

New data field is created with AngularFire2 update instead of updating existing field

I am facing an issue with updating a Firestore model in Angular 6. The model consists of a profile name and a list of hashtags. The "name" is stored as the value of a document field, while the "hashtags" are stored as keys in an object. However, every time ...

javascriptangulartypescriptgoogle-cloud-firestoreangularfire2

Is conditional CSS possible with NextJS?

While working on an animated dropdown for a navbar, I came across this interesting dilemma. In a strict React setup, you can use an inline if/else statement with onClick toggle to manage CSS animation styles. To ensure default styling (no animation) when ...

javascriptcssreactjsnext.js

Transforming nested JSON files into nested jQuery divs

Is it possible to iterate through two JSON files that have a parent-child relationship based on simple ID primary and foreign keys? Can we then display the data in a list of divs with the following characteristics: Hierarchical - child divs should only a ...

javascriptjqueryhtmlcssjson

Issue with JSON or Jquery: Uncaught error message: Cannot access property 'error' as it is null

I am attempting to initiate an ajax call using the jQuery code provided below. However, when I try this in Chrome, I encounter an error that says 'uncaught typeerror cannot read property 'error' of null'. This prevents the preloader fr ...

javascriptjqueryjson

How to display a conditional component in a single line with Material UI

I'm facing an issue with a component that is being reused multiple times. Here's the current output: |MyComponent1| |MyComponent2| Specifically, my condition is: if (a == 'One' || b == 'Two'){ <MyComponent data={data}/> ...

javascriptreactjsmaterial-uicomponentsstyling

Does the triple equal operator in JavaScript first compare the type of the value?

When using the triple equal operator, it not only measures the value but also the type. I am curious about the order in which it compares the value and returns false if they do not match, or vice versa. ...

javascriptnode.jstriple-equals

Refreshing a single HTML element in ASP.NET MVC - the simple way!

Recently, I put together an image gallery using the unite gallery jquery plugin and now I want to change up the images it displays. My plan is to have a button labeled "art" that, when clicked, triggers a function to update the directory path and load ne ...

javascriptc#jqueryrazor-pages

Uploading Files Using the Dropbox API Version 2

Before, I integrated the Dropbox API V1 into my web application to upload files to my personal Dropbox account. The app was configured to use only one specific dropbox account for file uploads. Previous Process: I registered an app on the dropbox develo ...

javascriptnode.jsdropboxdropbox-api

Retrieve data from backend table only once within the bootstrap modal

How can I retrieve values from a table once a modal is displayed with a form? I am currently unable to access the values from the table behind the modal. Are there any specific rules to follow? What mistake am I making? I would like to extract the values ...

javascriptjqueryhtmltwitter-bootstrap