Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Java Spring Basics Using the MVC Architecture Code Two More Thymeleaf Templates

John Clune
PLUS
John Clune
Courses Plus Student 4,951 Points
Posted by John Clune
John Clune
Courses Plus Student 4,951 Points

GIFs won't display on category pages

Everything is great except the GIF's on the individual category pages won't show up at all. Chrome inspector doesn't show the div classes being created by the for each loop. GIF's on other pages show up fine, content of every page including category/1, 2, 3 looks the same as the video (minus the missing GIFs).

I spent an hour pouring over the code and in frustration finally downloaded the project.zip and copied the code in each one of the files (Ctrl A + Ctrl C) and replaced the code in my files (Crtl A + Ctrl V) only updating the package names and imports to my own project structure (which is also identical besides not being com.teamtreehouse). I did this one at a time thinking I could at least find out the file I had made the error in, but after replacing all the code in my project it still doesn't work.

Seems very strange to me, anyone have any ideas?

2 Answers

Ryan Hatamosa
Ryan Hatamosa
4,054 Points
Ryan Hatamosa
Ryan Hatamosa
4,054 Points

In the category.html file: <!-- In the img tag, make the src attribute point to the static GIF image, according to the 'name' field of the 'gif' object from the loop above -->

You would simply change this: <img src="http://placehold.it/200x200" />

to this: <img th:src="@{'/gifs/' + ${gif.name} + '.gif'}" />

John Clune
John Clune
Courses Plus Student 4,951 Points
John Clune
John Clune
Courses Plus Student 4,951 Points

It's been awhile since I've done this project but looking through my code that's exactly what I have done. Like I said I eventually just copy pasted the finished project source code and it still doesn't work. Thanks though.

Zwea Htet
Zwea Htet
4,001 Points
Zwea Htet
Zwea Htet
4,001 Points

I also encounter the similar problem because I forgot modelMap.put("gifs", gifs) in category method. This is what I have for CategoryController class.

@Controller public class CategoryController { @Autowired private CategoryRepository categoryRepository;

@Autowired private GifRepository gifRepository;

@RequestMapping("/categories") public String listCategories(ModelMap modelMap) { List<Category> categories = categoryRepository.getAllCategories(); modelMap.put("categories", categories); return "categories"; }

@RequestMapping("/category/{id}") public String category(@PathVariable int id, ModelMap modelMap) { Category category = categoryRepository.findById(id); modelMap.put("category", category);

List<Gif> gifs = gifRepository.findByCategoryId(id);
modelMap.put("gifs", gifs);

return "category";

} } Hope this helps!