无涯教程网

Html Vue.js 动态图像不起作用

发布于11月09日

我有一个 case ，在我的Vue.js个带有webpack个Web应用程序的情况下，我需要显示动态图像.我想显示img图像的文件名存储在变量中的位置.该变量是computed属性，其返回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>

但不确定为什么我之前的方法没有奏效.

Html相关问答推荐

将小文本放在输入字段的右侧

悬停时放大人物：不要增加其周围边界的大小

从收件箱获取内部HTML值

如何防止下拉菜单内的Bootstrap列表行包装？

CSS动画积分计数器

在 bootstrap 中的弹性项之间添加连接行

如何在htmlAngular 17的@for中使用索引

react ：事件和转发器在特定代码段中不起作用

嵌套表列高度不是100%高度的问题

如何在用css使用网格视图时设置宽度？

在一行中对齐文本和图标

平移变换下的SVG剪辑路径行为

禁用的文本区域会丢失换行符

使用CSS Flexbox时，我的图像未对齐

如何用背景色填充边框半径创建的间隙

为什么 Flexbox 中相邻元素上的 flex：1 会影响另一个元素的固定宽度？

如何在图片前面放置下拉框？

在包含 html 标签的字符串的子字符串中应用不同的样式

将表格标题和过滤器调整到表格的顶部边缘

在 React (NEXT) 中，当我try 进行动态补充时，我无法使用实例this来引用输入

实用课程推荐

相关教程推荐