Tomster not showing up in super-rentals tutorial

Questions
1

There’s another issue with pretty much the same title from 2023, and yes, the fix presented there eventually got added as a fix and it is now present in the super-rentals app.css file.

TL;DR: Replace the url for the tomster image in the css to http://localhost:4200/assets/images/teaching-tomster.png

I got to the `Jumbo` component portion wondering when I would see Tomster but I’m not sure now if this is just an HTML issue.

// app/components/jumbo.gjs
<template>
  <div class="jumbo">
    <div class="right tomster"></div>
    {{yield}}
  </div>
</template>

/* app/styles/app.css */
.tomster {
  background: url("../assets/images/teaching-tomster.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 200px;
  width: 200px;
  position: relative;
  top: -25px;
}

Yes, I can navigate to http://localhost:4200/assets/images/teaching-tomster.png and he’s there, no issue. Problem comes when I try to render it on screen.

Initially, I blamed Safari for this and switched to Chrome and Firefox, both failing also.

The only thing that worked for me was to change the image URL in the .css file:

.tomster {
  /*                     ⬇️ this        */
  background: url("../@embroider/assets/images/teaching-tomster.png");
  /* ... */

Only then Tomster appeared, and only in Chrome. Attempting this fix in a freshly-cleared cache in both Safari and Firefox didn’t work. For some reason, only Chrome liked this fix… For a bit, at least. It then broke again, leaving the only possible solution to add the whole url to the css:

.tomster {
  background: url("http://localhost:4200/assets/images/teaching-tomster.png");
  /* ... */

There are no errors in either Browser’s console (other than the missing favicon)

Safari

Safari's network tab about the Tomster request
Safari's network tab about the Tomster request1074×741 139 KB

Chrome

Chrome's network tab - tomster request
Chrome's network tab - tomster request900×723 66 KB

Of course, having Tomster on screen isn’t critical for the tutorial to work, I just found it odd. For all I know, this might be super specific to my environment.

Versions

ember-cli: 7.1.0
node: 24.18.0
os: darwin arm64
1 Like
2

This sounds more like an Embroider asset resolution issue than an HTML problem. Since the direct URL works but the relative CSS path doesn’t, I’d check how Ember CLI 7.1 is processing assets in the build. The fact that behavior differs between browsers makes the asset URL handling even more suspicious.

3

Appreciate the detailed writeup.