javascript - 在javascript问题中更改图像src的值

Question

大家好，我是 JavaScript 的新手。 我想动态改变图片:

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>

问题是，当我更改图片源时，javascript 在以下之间添加了“/item”:http://127.0.0.1:8000/item/storage/C1pNsNdD6XeJie4RBOp8RjyDocPvcNFGdJJUGfiU.jpeg

链接应该是这样的: http://127.0.0.1:8000/storage/C1pNsNdD6XeJie4RBOp8RjyDocPvcNFGdJJUGfiU.jpeg

是否有删除“/item”的选项？

Answer 1

这里的问题很简单，你将 src 属性设置为相对路径。 storage/ 将创建一个相对于您当前 url 的链接，所以当您收到此错误时，我猜测您的 url 是“http://localstorage:8000/storage/something.php”。

要使此路径从站点根目录成为绝对路径，您只需在它前面加上另一个斜杠即可。这样，无论当前 url 是什么，它都将始终相对于您的站点根目录。

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

Jack Bashford 的解决方案也在 url 之前添加了这个斜杠，但随后通过将字符串拆分为不存在的内容然后加入一个只有一个项目的数组来做很多废话。