Vuejs背景图像不工作

Question

你好，伙计们，

在Vuejs中，反斜杠在背景图像样式和字符串替换在HTML中有问题，不工作和解决方案。

检查元素的URL

http://localhost:8000/storage/banar-pages\July2018\WPNrFE6eXopKnjMqjNgW.jpg

来自DB的

banar-pages\July2018\WPNrFE6eXopKnjMqjNgW.jpg

组件文件代码

<div class="block-entry fixed-background" :style="'background-image: url(' +link + '/storage/' + about.image +');'">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="cell-view simple-banner-height text-center">
                    <div class="empty-space col-xs-b35 col-sm-b70"></div>
                    <h1 class="h1 light">{{ about.name }}</h1>
                    <div class="title-underline center"><span></span></div>
                    <div class="simple-article light transparent size-4">{{ about.details }}</div>
                    <div class="empty-space col-xs-b35 col-sm-b70"></div>
                </div>
            </div>
        </div>
    </div>
</div>

谢谢

Answer 1

我需要替换图片链接，但是flage不工作image.replace('/\\/g', '/')

看起来，您不正确地将字符串作为第一个参数传递给String#replace()，这将导致文字替换(也就是说，它将替换字符串中的第一个/\/g )：

​

console.log('XX/\\/gXX/\\/gXX'.replace('/\\/g', '/'))

​

从使其成为正则表达式的第一个参数中删除引号

​

console.log('\\path\\to\\foo.png'.replace(/\\/g, '/'))

​

然后，您的Vue模板可以类似于以下内容：

<div :style="'background-image: url(' +link.replace(/\\/g, '/') + '/storage/' + about.image.replace(/\\/g, '/') +');'">

​

new Vue({
  el: '#app',
  data() {
    return {
      link: 'http:\\placekitten.com',
      about: {
        image: '\\100\\100'
      }
    }
  }
})

.dummy {
  width: 100px;
  height: 100px;
}

<script src="https://unpkg.com/vue@2.5.16"></script>

<div id="app">
  <div class="dummy"
       :style="`background-image: url(${link.replace(/\\/g, '/')}${about.image.replace(/\\/g, '/')})`">
  </div>
</div>

​

Answer 2

您可以使用一种方法来处理该字符串并返回一个修改后的URL：

methods: {
    prepareURL(string) {
        return string.replace('/\\/g', '/');
    }
}

组件代码：

<div class="block-entry fixed-background" :style="'background-image: url(' +link + '/storage/' + prepareURL(about.image) +');'">
  <div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <div class="cell-view simple-banner-height text-center">
                <div class="empty-space col-xs-b35 col-sm-b70"></div>
                <h1 class="h1 light">{{ about.name }}</h1>
                <div class="title-underline center"><span></span></div>
                <div class="simple-article light transparent size-4">{{ about.details }}</div>
                <div class="empty-space col-xs-b35 col-sm-b70"></div>
            </div>
        </div>
    </div>
</div>