Vuejs背景图像不起作用

2 回答

• 0

  我需要替换图像链接，但flage不起作用image.replace（'/ \ / g'，'/'）

  看起来您错误地将字符串作为第一个参数传递给String#replace()，这将导致文字替换（即，它将替换字符串中第一次出现的 /\/g ）：

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

  从第一个参数中删除引号为make it a regular expression：

  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>
  

  回复于 2024-05-12T17:18:59+08:00
• 0

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

  回复于 2024-05-12T17:18:59+08:00