How do I use the index tag? "Index is not defined"

Števo Kelbel 0
Viewed 34

please i have no idea how to resolve my problem.

Need to implement js-cloudimage into my Svelte aplication.

How to use {index} tag ? console error : Uncaught (in promise) ReferenceError: index is not defined

I know that I don't have an index variable declared, but I don't know how to get it into the Svelte component from an external script. Is there any possibility to use export let ?

MY code :

<script>
    let md;
    const initializeRemarkable = () => {
        md = new window.remarkable.Remarkable();
        window.CI360.init();
    }
</script>

<svelte:head>
    <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js" on:load={initializeRemarkable}></script>
</svelte:head>

<div className="MarkdownEditor">
  <div
    className="content">
        {#if md}
        <div class="cloudimage-360" data-folder="assets/img/picker/rotator/" data-filename="{index}.jpg" data-amount="221" data-stop-at-edges="true"></div>
        {/if}
  </div>
</div>

thanks for all your help.

svelte
1 Answers

To prevent Svelte from interpreting {index} as the use of a index variable either replace the braces with alternatives like

data-filename-x="orange-&#123;index&#125;.jpg"

or, to keep the readability, actually introduce a index variable holding the string that it should be REPL

<svelte:head>
    <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js"></script>
</svelte:head>

<script>
    const index = "{index}"
</script>

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