publicディレクトリのアセットがStackBlitzでレンダリングカラムから表示できない

[knokmki612]

例: https://stackblitz.com/github/tuqulore/vue-3-practices/tree/main/handson-nuxt-playground?file=app.vue&terminal=dev

以下のケースで表示できない

• Vueのテンプレートからurlを指定して表示
• 直接該当するアセットのurlをブラウザで表示

[knokmki612]

靴のギャラリー https://stackblitz.com/github/tuqulore/vue-3-practices/tree/main/handson-gallery-shoes-finish?file=src/App.vue&terminal=dev をフォークすると同様の問題が発生

アセットの参照が素朴にパス解決しようとするとうまくいかないのでなにかしら工夫する必要があるのかなと思った

関連 stackblitz/core#72

[knokmki612]

ハンズオン環境から直接画像を取得するのではなく、 github.com から取得可能な url & crossorigin 属性をimg要素に付与することで対処しようかとおもった

urlの例： https://raw.githubusercontent.com/tuqulore/vue-3-practices/main/handson-gallery-shoes/public/img/items/shoes-12.jpg

[knokmki612]

例: https://stackblitz.com/github/tuqulore/vue-3-practices/tree/main/handson-nuxt-playground?file=app.vue&terminal=dev

以下のケースで表示できない

* Vueのテンプレートからurlを指定して表示

* 直接該当するアセットのurlをブラウザで表示

現時点で再現しようとしたが再現できなかった。 https://stackblitz.com/edit/tuqulore-vue-3-practices-sdn2ox?file=app.vue&terminal=dev

[knokmki612]

靴のギャラリー https://stackblitz.com/github/tuqulore/vue-3-practices/tree/main/handson-gallery-shoes-finish?file=src/App.vue&terminal=dev をフォークすると同様の問題が発生

再現しなかった

https://stackblitz.com/edit/github-dtqotn?file=src%2FApp.vue&terminal=dev