Question

请尝试将css background-image属性添加到元素，但它会在URL中不断添加空格。我正在使用主题构建应用程序的前端，使用laravel作为后端。

$('.background-image-maker').each(function () { var imgURL = $(this).next('.holder-image').find('img').attr('src'); $(this).css('background-image', 'url(' + imgURL + ')'); });

但是它不断为我的img src添加一个空间。这是我检查它时的外观

<div class="background-image-maker" style="background-image: url("/storage/listings\a ugust2018\b Z3oR5cjVtLXQXSkGinM.jpg");"></div>

关于如何解决此问题的任何想法？这是html部分

<div class="background-image-maker"></div> <div class="holder-image"> <img src="/storage/{{ $listing->cover_image }}" alt="" class="img-fluid d-none"> </div>

Answer 1

使用.replace()

 function getBackgroundImageUrl($element) {
    if (!($element instanceof jQuery)) {
      $element = $($element);
    }

    var imageUrl = $element.css('background-image');
    return imageUrl.replace(/(url\(|\)|'|")/gi, ''); // Strip everything but the url itself
  }

尝试向元素添加css background-image属性，但仍在URL中添加空格

1 个答案: