Pizza images not showing correctly

[ckild]

Hi Ryan,

I was following your instructions on Pluralsight. I am having an issue with the images after I set everything up.
I have it running on http://pizza-loader-1576040548.us-east-1.elb.amazonaws.com/ everything works fine besides the images were not being create properly when making new pizzas. I'm not sure if it is related to the CORS or something else.

Looks like all images works good besides the first 3 images, do you happen to know what would cause this kind of issue?

[ryanmurakami]

Hi @ckild,

Yes, sorry you're running into this. The issue is that the preview and composite images have the same filename. For whatever reason, browsers hate this. The solution is to just make a copy of those first three images and give them different names. Then update the first arguments on these lines:

pizza-luvrs/data/toppings.js

Lines 7 to 9 in 8422864

	create('Dough Crust', 'dough_crust.png', 'dough_crust.png', 1)
	create('Marinara Sauce', 'marinara_sauce.png', 'marinara_sauce.png', 2)
	create('Mozzarella Cheese', 'mozzarella_cheese.png', 'mozzarella_cheese.png', 3)

That should fix it. Let me know if you still have trouble!

[sanders3]

I hit this issue too and it stumped me for a while. I had not spotted that the other toppings had a separate preview image like "rainbow.png" but when used as a topping the image is "rainbows.png".

So I copied 'dough_crust.png' to 'dough_crust_preview.png', 'marinara_sauce.png' to 'marinara_sauce_preview.png' and 'mozzarella_cheese.png' to 'mozzarella_cheese_preview.png' then updated toppings.js as follows:

create('Dough Crust', 'dough_crust_preview.png', 'dough_crust.png', 1)
create('Marinara Sauce', 'marinara_sauce_preview.png', 'marinara_sauce.png', 2)
create('Mozzarella Cheese', 'mozzarella_cheese_preview.png', 'mozzarella_cheese.png', 3)