search

ts1 / flipbook-vue

3D page flip effect for Vue.js
https://ts1.github.io/flipbook-vue/
614 stars 158 forks source link

Background transparent on flipped page animation #90

Closed aqordeon closed 8 months ago

aqordeon commented 1 year ago

Hi, anyway thanks for the package.

I facing an issue which is the flipped page is transparent on animation and appear instantly when the animation is finished. Did anybody ever face this issue? Or was just I wrong when implemented it? I use Nuxt 3.

aqordeon commented 1 year ago

SOLVED. This issue is strange. The issue occurs because the filename of the image contains a space, "123 abc.jpg" would occur the issue, but "123abc.jpg" would work well.

gusberinger commented 11 months ago

I found a workaround to this issue. Replacing invalid characters with their encoded equivalents before passing the list of urls to the component fixes the bug.

data() {
    const urls = originalUrlList.map((url) => {
      return url.replace("(", "%28").replace(")", "%29").replace(" ", "%20")
    })
    return {
      pages: [null, ...urls],
      hasMouse: true,
      pageNum: null,
    }
}