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

Automate your workflow with Apps Script: Save time by appending a row and seamlessly including additional details to the

I currently have 2 server-side scripts that handle data from an html form. The first script saves user input to the last row available in my Google sheet, while the second script adds additional details to the newly created row. Although both scripts work ...

javascriptgoogle-apps-script

Refreshing an external file in Node.js at regular intervals

Seeking guidance on loading external files in node. I'm currently working with an external JSON file that houses some configuration settings, and this file gets updated by an outside process every 10 minutes. How can I automate the reloading of this ...

javascriptjsonnode.js

Utilizing Jquery for ASP.NET, an AJAX call dynamically populates a list

My user interface is designed to populate a select dropdown menu using data retrieved from a database through an AJAX call. The C# web method responsible for this operation is structured as follows: private static List<List<string>> componentT ...

javascriptc#jqueryasp.netajax

Combining two JSON objects in JavaScript is simple when their IDs correspond to each other in both objects

I have a query related to merging two different objects from the database, both in JSON format. These two objects share two key/value pairs: IRBId = ... and id = ..., which can be seen in the examples below: OBJ 1 { "data":{ "IRBs":{ "n ...

javascriptjson

Unable to transfer the component between components

This is the code I have: index.js: import React from "react"; import ReactDOM from "react-dom"; import {dest, People} from './components/people'; import json from './people.json'; function initFromJson() { let names = []; for(let ...

javascriptreactjs

What is the best way to retrieve a value by using the data.get() method?

I am currently facing an issue with retrieving the value of a textarea that I have dynamically added to a fieldset in my form. When I attempt to submit the form, the code below is executed: function handleSubmit(e) { e.preventDefault(); console.log( ...

javascript

Having issues with Node.js POST requests not functioning properly

Currently diving into learning the MEAN stack and facing a challenge with executing POST requests on the server. Here is a snippet from my server.js script: var express = require('express'); var bodyParser = require('body-parser'); v ...

javascriptnode.jspostcurlexpress

Updating two separate <DIV> elements with a single AJAX request

Can two different targeted DIVs be updated simultaneously using a single ajax call? Consider the index.html code snippet below: <script> xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.rea ...

javascriptphpajax

Methods for applying responsive design to react modals in React.js

I am looking to make my modal responsive across different media types. In my React JS project, I have implemented custom styles using the following code: import Modal from 'react-modal'; const customStyles = { content : { top ...

javascriptreactjs

The console.log() function does not accurately display the true value

While looping through a list and using a @click function to update other elements, I have encountered an issue with the index values bound to selectedFixtures. Each time I click on an element, it initially prints out [], and then on subsequent clicks, it ...

javascriptvue.js

Updating content on a webpage via AJAX request without altering the original source code

Within the body of our document, referred to as "form.php," we have the following components: At the head section, there is a JavaScript code block: <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").i ...

javascriptphphtmlajax

In a Vue serverless web application, OpenLayers Map object fails to trigger events

In my Vue serverless web application, I have implemented an OpenLayers map initialized in the mounted lifecycle method. The map is populated with ImageWMS layers that are updated by various functions. After updating the parameters of these layers, I call ...

javascriptvue.jsopenlayers

After updating the INNERHTML, the NAV tag content is no longer functional

I am facing an issue with replacing the contents of a NAV tag that contains UL list items. The original HTML within the NAV tag works perfectly fine, but when I replace it with my own HTML - which matches the original word for word - the dropdown functiona ...

javascriptcssinnerhtmlnav

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

javascriptcssangularjsjquery-mobile

Transforming a JSON object into a list in C#

After exploring similar posts without success, I am reaching out here for help. I have a Json data stored in a hidden field that I am trying to access in the code behind file of my markup page. My goal is to convert this Json into a List and bind it to a ...

javascriptc#json

The request to check the API at http://localhost/v5/api/checker returned a 404 error, indicating that

Trying to create a function that uses AJAX to call PHP, but encountering an error when clicking the button. Does anyone know how to solve this issue? Code provided below. PHP: $app->get('/checker', function () { $jsonContents = file_get_ ...

javascriptphpajaxslim

Update dynamically generated CSS automatically

Is there a way to dynamically change the CSS? The problem I'm facing is that the CSS is generated by the framework itself, making it impossible for me to declare or modify it. Here's the scenario at runtime: I am looking to target the swiper-pa ...

javascriptcssangularsassionic3

Troubleshooting problem with resizing and links in IE11 for iframe-resizer

When using the iframe-resizer from https://github.com/davidjbradshaw/iframe-resizer, I have encountered a few issues. Upon resizing the browser window, I noticed that if I first restore down and then manually resize, some extra padding appears. The paddin ...

javascriptjqueryiframe

Discover the joy of reading with wrap/unwrap to consume more content in less

I am experimenting with a 'read-more read-less' feature using a wrap method that currently only works for the 'show more' functionality. So, to clarify, if the text exceeds a certain length, I truncate it and insert a read-more-link ( ...

javascripthtmljquerycssshow-hide

What are some ways to design scrollbars with a Google Wave-like style?

Is there a way to design scrollbars similar to the ones found in Google Wave? They seem to save space and have an appealing look. I am interested in implementing these customized scrollbars on a div element, just like how Google Wave utilizes them. (im ...

javascripthtml