时间戳

首页 > 解决方案 > Vuejs背景图像不起作用

html - Vuejs背景图像不起作用

问题描述

大家好，

我在 Vuejs 中背景图像样式中的反斜杠和 HTML 中的字符串替换不起作用和解决方案时遇到问题。

来自检查元素的 URL

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

从数据库

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>

谢谢

标签： htmlcssvue.js

解决方案

您可以有一种方法来处理该字符串并返回修改后的 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>

推荐阅读