How to Fix Broken Images in Preview

A broken image icon is almost always a bad path, not a damaged file. In editor.clincoo.buzz select the image, read src in the elements panel, then compare it with the file name in the project tree.

Match the relative path

From index.html at the root, src="images/hero.jpg" looks for an images folder next to index.html. From a page inside about, the same path looks for about/images/hero.jpg. Step up one folder with ../images/hero.jpg.

Letter case and extension

Hero.JPG and hero.jpg are different files on many servers. A .jpeg extension is not the same as .jpg. Spaces in file names are safer as hyphens, then update src.

Confirm the file exists

If the file was never uploaded, upload it before saving the HTML. After deploy from app.clincoo.buzz, open the image URL directly. A 404 means the live path is still wrong.