I build some kind of eBook website with next js and nodejs, I decided that user can upload an epub file and will be able to read it. I exported all texts and imgs with its styles, with text 0 problem. but with images…..
I can even get whole src and info about each image but it’s not being displayed on a website! Shows only its alt and small square(that indicates that by src no img found), my src usually looks like my domain(now it’s http://localhost:3000/Image/(any image name).(image format). but its not being displayed even though those srcs are generated automatically, I tried a lot of stuff, like tried to delete localhost part or maybe change the format etc, nothing worked…
here is my code to extract data from epub:
``
``import ePub from "epubjs";
export default async function getChaptersFromEpub(epub) {
const book = ePub(epub);
await book.ready;
const sectionPromises = [];
book.spine.each((section) => {
const sectionPromise = (async () => {
try {
const chapter = await book.load(section.href);
if (!(chapter instanceof Document)) {
console.error(`Failed to load chapter: ${section.href}`);
return null;
}
// Extract the title dynamically from headings (like h1, h2, etc.)
let titleElement = chapter.querySelector("h1, h2, h3, h4, h5, h6");
let title = titleElement?.textContent.trim();
if (!title) {
title = section.idref || `Unknown Title`;
}
const images = chapter.querySelectorAll("img");
images.forEach((img) => {
img.remove()
});
return {
title: title,
html: chapter.body.innerHTML
};
} catch (error) {
console.error(`Error processing chapter: ${section.href}`, error);
return null;
}
})();
sectionPromises.push(sectionPromise);
});
const chapters = await Promise.all(sectionPromises);
return chapters.filter(chapter => chapter && chapter.html);
}``
``
and display it like that:
{chapters.length > 0 && (
<div
className={`chapter-content pb-14 flex flex-col md:gap-3 h-full md:text-[17px] text-[1.3vw] lg:overflow-scroll overflow-auto`}
ref={contentRef}
dangerouslySetInnerHTML={{ __html: chapters[currentChapterIndex].html }}
/>
)}
I would be more than happy if you show me what I can do be able to display those images! you can check by console log how src looks like by yourself but I mentioned above that.