javascript – Vue.js动态图像无效

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Vue.js动态图像无效，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含755字，纯文字阅读大概需要2分钟。

内容图文

我有一个案例,在我的Vue.js与webpack网络应用程序,我需要显示动态图像.我想向img显示图像的文件名存储在变量中的位置.该变量是一个计算属性,它返回一个Vuex存储变量,该变量在beforeMount上异步填充.

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

然而,当我这样做时它完美地工作：

<img src="../assets/dog.png" alt="dog">

我的情况类似于这个fiddle,但这里它适用于img URL,但在我的实际文件路径中,它不起作用.

什么应该是正确的方法呢？

解决方法:

我通过以下代码得到了这个

  getImgUrl(pet) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + pet + ".png")
  }

并在HTML中：

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

但不确定为什么我之前的方法不起作用.

内容总结

以上是互联网集市为您收集整理的javascript – Vue.js动态图像无效全部内容，希望文章能够帮你解决javascript – Vue.js动态图像无效所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---