Ndtyjky

Hey guys I'm pretty new to JavaScript.
I want to change the picture dynamically:

HTML:

<div class="col-md-6">

  <div class="full-with">

    <img src="{{ asset('storage/'. $product->productImg) }}" class="attachment-shop_single wp-post-image" alt="" title="" id="myImg">

  </div>

</div>



<div class="summary entry-summary col-md-6">

  <h1 itemprop="name" class="product_title entry-title">

    {{$product->productName}}

  </h1>

  <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">

    <form class="cart" method="post" action="{{ route('cart.add') }}">

      {{ csrf_field() }}

      <div class="form-group">

        <label for="product_size" class="grey">Model</label>

        <span class="red">*</span>

        <select class="form-control" id="productModel" name="product" onchange="myFunction();">

          <option value="">Wybierz model produktu...</option>

          @foreach($productModels as $productModel)

          <option value="{{$productModel->id}}">{{$productModel->modelName}} - {{$productModel->modelPrice}} @if($productModel->modelPriceCurrency === 1) PLN @else EUR @endif</option>

          @endforeach

        </select>

      </div>

      <div class="form-group">

        <label for="exampleSelect1">Ilość:</label>

        <select class="form-control" id="exampleSelect1" name="quantity">

          <option value="1">1</option>

          <option value="2">2</option>

          <option value="3">3</option>

          <option value="4">4</option>

          <option value="5">5</option>

        </select>

      </div>

      <div class="form-group">

        <div itemprop="description">

          <p>{!! nl2br(e($productCategory->categoryDescription)) !!}</p>

        </div>

      </div>

      <div class="form-group">

        <input type="submit" class="btn btn-primary" value="Dodaj do wyceny..">

      </div>

    </form>

  </div>

</div>

JS

<script>

    function myFunction() {



        var model = [

        <?php foreach($productModels as $productModel):?>

          <?=$productModel?>,

        <?endforeach;?>

        ];



        var e = document.getElementById("productModel");

        var selectedModelId = e.options[e.selectedIndex].value - 1;



        var modelImg = model[selectedModelId].modelImg;



        document.getElementById("myImg").src = 'storage/' + modelImg;

    }



    myFunction();   

</script>

The problem is that when I'm changing the source of the picture javascript adds "/item" between: http://127.0.0.1:8000/item/storage/C1pNsNdD6XeJie4RBOp8RjyDocPvcNFGdJJUGfiU.jpeg

Link should look like:
http://127.0.0.1:8000/storage/C1pNsNdD6XeJie4RBOp8RjyDocPvcNFGdJJUGfiU.jpeg

Is there any option to delete "/item"?

To delete /item, do this:

var modelImg = model[selectedModelId].modelImg;

var source = '/storage' + modelImg;

source = source.split("/item");

source.join("");

document.getElementById("myImg").src = source;

The problem here is simple, you are setting the src attribute to a relative path. storage/ will create a link relative to your current url, so I'm gussing your url is "http://localstorage:8000/storage/something.php" when you get this error.

To make this path absolute from the site root instead you simply prepend it with another slash. That way it will always be relative to your site root no matter what the current url is.

document.getElementById("myImg").src = '/storage/' + modelImg;

The solution by Jack Bashford also adds this slash before the url but then does a lot of nonsense by splitting the string on something that doesn't exist and then joining an array with only one item.