开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >Vuejs图片url链接

问Vuejs图片url链接
EN

Stack Overflow用户

提问于 2018-03-20 17:59:58

回答 3查看 9.5K关注 0票数 3

嗨，我对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

我真的不确定我从哪里得到wrong...Please帮助...

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-03-20 18:21:06

另一种方法是在样式属性上使用计算属性：

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

模板：

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

票数 6

EN

Stack Overflow用户

发布于 2018-03-20 21:07:43

我认为更好的(和可伸缩的)解决方案是有一个类来设置你想要的样式，并将它添加到元素中，如果它必须是动态的，只需在某些条件下使用: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

票数 3

EN

Stack Overflow用户

发布于 2018-03-20 18:27:34

我非常确定不能通过import语句导入镜像，只能通过模块(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)导入。

我建议在Vue-Webpack-template上仔细阅读，看看static assets section。

简而言之，您可以使用Webpack (或Gulp)将您的资产移动到固定位置，然后使用链接。

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49381171

复制

相似问题