Question

嗨，我对vuejs很新。我尝试导入图片，然后在方法中调用此图片。

import image from '@/assets/svg/xxx.svg'

然后在数据中

data () {
        return {
            image: image
        }
    },

并尝试使用它

li.style.backgroundImage = "url('this.image')";

但图像未显示，图像链接显示如下

http://127.0.0.1:8080/order/detail/29/this.image

我真的不确定我哪里出错...请帮忙...

Answer 1

使用style属性的计算属性执行此操作的另一种方法：

computed : {
    liStyle(){
        return "background-image : url('" + require('@/assets/svg/xxx.svg') + "')";
    }
}

模板：

<li :style="liStyle"></li>

Answer 2

我认为更好（和可扩展）的解决方案是拥有一个设置所需样式的类，并将其添加到元素中，如果它必须是dinamically，只需在某些条件下添加:class

注意：我使用了外部图片路径，但它与您的本地路径相同。并使用require()导入图像和html

new Vue({
  el: '#example'
})

.li-with-bg-image {
  background-image: url('http://via.placeholder.com/350x150')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="example">
  <ul>
    <li :class="{'li-with-bg-image': true}"></li>
    <li></li>
    <li class="li-with-bg-image"></li>
  </ul>
</div>

其他选项

使用内联样式（使用v-bind：style）

new Vue({
  el: '#example'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="example">
  <ul>
    <li :style="`background-image: url('http://via.placeholder.com/350x150')`"></li>
  </ul>
</div>

使用数据部分或绑定到样式的计算属性

new Vue({
  el: '#example',
  data: {
    myStyles: `background-image: url('http://via.placeholder.com/350x150')`
  },
  computed: {
    anotherStyles () { 
      return `background-image: url('http://via.placeholder.com/300x150')`
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="example">
  <ul>
    <li :style="myStyles"></li>
    <li></li>
    <li :style="anotherStyles"></li>
  </ul>
</div>

资源：

Class and style bindings Docs

Answer 3

我很确定你不能通过import语句导入图像，只能模块（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import）。

我建议您阅读Vue-Webpack-template并查看static assets section。

简而言之，您可以使用Webpack（或Gulp）将资产移至固定位置，然后使用链接。

Vuejs图片网址链接

3 个答案: