search

scaleflex / js-cloudimage-360-view

Engage your customers with a stunning 360 view of your products. Any questions or issues, please report to https://github.com/scaleflex/js-cloudimage-360-view/issues
Other
2k stars 230 forks source link

how to use in vue #151

Closed velvetflame closed 1 year ago

velvetflame commented 1 year ago

i added script tag with CDN link in index.html, but the code in vue templete didn't render functional. Is any idea how to import this js properly?

index.html

<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></script>

myVueComponent.vue 

            <div
                id="gurkha-suv"
                class="cloudimage-360"
                data-amount-x="73"
                data-filename-x="orange-{index}.jpg"
                data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
            ></div>
velvetflame commented 1 year ago

problem solved by useing mounted block, special thanks to qiqqq provided solution .

import in vue component (share from stackoverflow)

<script>
export default {
    name: "yourComponent",
    mounted() {
      const scriptEl = document.createElement("script");
      scriptEl.setAttribute(
        "src",
        "https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"
      );
      scriptEl.async = true;
      document.head.appendChild(scriptEl);
    }
}
</script>