I started building a library application where users can log books they are reading and/or want to read. The cards for each book are created dynamically using JavaScript objects with data retrieved from a form displayed when the user clicks the button to add a book. One of the inputs accepts a link to the books cover image, where if one is NOT provided, a default SRC is fed to the img element pointing to an SVG with the text content "No Image Available". Using a live server the image appears properly; However, GitHub pages doesn't render the image despite the correct source is present in the image HTML tag (checked via devtools). Why is this?
Thank you!
I made sure the file name, extension and file path were correct. The image is significantly lower than the file size limit for Github… and the browsers I've tested it on support SVG images.
The SVG file path is incorrect.
The following correctly loads the SVG inside github pages:
const bookImgDefaultSource = 'assets/images/book-case/no-image-placeholder.svg';
instead of
const bookImgDefaultSource = '../assets/images/book-case/no-image-placeholder.svg';