diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue index 92beb7b..79f959c 100644 --- a/src/components/StackedNote.vue +++ b/src/components/StackedNote.vue @@ -36,13 +36,15 @@ const { displayNoteOverlay } = useNoteOverlay(className.value, props.index) const displayedTitle = computed(() => filenameToNoteTitle(props.title)) watch(content, () => { - if (content.value) { - nextTick(() => { - listenToClick() - useImages(props.sha) - generateTweets() - }) + if (!content.value) { + return } + + nextTick(() => { + listenToClick() + useImages(props.sha) + generateTweets() + }) }) const focus = () => scrollToFocusedNote(props.sha) diff --git a/src/hooks/useImages.hook.ts b/src/hooks/useImages.hook.ts index f4d485a..da83c14 100644 --- a/src/hooks/useImages.hook.ts +++ b/src/hooks/useImages.hook.ts @@ -1,7 +1,7 @@ import { useFile } from '@/hooks/useFile.hook' import { resolvePath } from '@/modules/repo/services/resolvePath' import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' -import { computed } from 'vue' +import { computed, watch } from 'vue' const SRC_PREFIX = 'data:image/jpeg;charset=utf-8;base64,' @@ -12,17 +12,21 @@ export const useImages = (sha: string) => { () => store.files.find((file) => file.sha === sha)?.path ) - const images = document.querySelectorAll(`.note-${sha} img`) + watch(currentFilePath, (filePath) => { + if (!filePath) { + return + } - images.forEach(async (image) => { - if (currentFilePath.value) { + const images = document.querySelectorAll(`.note-${sha} img`) + + images.forEach(async (image) => { const src = image.getAttribute('src') if (!src || src.startsWith(SRC_PREFIX)) { return } const imageFilePath = resolvePath( - currentFilePath.value, + filePath, image.getAttribute('src') ?? '' ) @@ -35,6 +39,6 @@ export const useImages = (sha: string) => { const fileContent = await getCachedFileContent() image.setAttribute('src', `${SRC_PREFIX} ${fileContent}`) - } + }) }) }