Problem with Tomster showing up in Super Rentals tutorial

1

Hello, folks! :slight_smile:

Tomster isn’t showing up as advertised on my page. I’m following the steps here. This URL loads the image correctly when I’m running ember server. I get no errors in the console. This happens on both Chrome and Firefox. I’m on Linux.

This is my app.css:

.tomster {
  background: url(../assets/images/teaching-tomster.png);
}

This is my index.hbs:

<div class="jumbo">
  <div class="right tomster" id="please-help"></div>
  <h2>Welcome to Super Rentals!</h2>
  <p>We hope you find exactly what you're looking for in a place to stay.</p>
</div>

Any ideas? Thanks in advance!

2

Have you tried background: url(background: url(/assets/images/teaching-tomster.png); (without the ..). I have a feeling that would fix your problem, but I might be wrong. :person_shrugging:

1 Like
3

Thank you, @Dan_Nelson ! That didn’t work, unfortunately, but I still didn’t get an error in the console.

4

What is the contents of your ember app’s public folder?

You should hopefully see public/assets/images/teaching-tomster.png … is this correct? Does the teaching-tomster.png image open if you do it from your file system?

Is there any 4## requests in the network tab of your browser’s developer tools?

1 Like
5 
✔ ~/projects/ember/super-rentals [master L|● 1✚ 1…3] 
09:03 $ ls public/assets/images/
teaching-tomster.png

Yes, http://localhost:4200/assets/images/teaching-tomster.png. loads the image in my browser just fine. Loading http://localhost:4200/ gives no 4## errors. When I change the url() location to something invalid I do get 404 errors, so that part of app.css is being read.

6

What happens if you put a dimension on this empty div. Like for giggles, try:

<div class="right tomster" id="please-help" style="height: 500px; width: 500px"></div>

Does the image appear now? I haven’t looked into this tutorial in years so I am just now parsing the html & css. Not sure the .tomster background image is the best way to do all this. The tutorial is probably trying to teach you about the public directory and css all at the same time :person_shrugging:

1 Like
7

Eureka!!! :laughing: Yes indeed. It was not an Ember config problem. It seems like it was a CSS/HTML problem. Thank you, @Dan_Nelson !!! Maybe I’ll try to do a pull request for that or at least create an issue for it.

1 Like