Vue.js动态图像不起作用

JavaScript

理查德Itachi

2020-03-11

我有一种情况，在Vue.js使用webpack网络应用程序时，我需要显示动态图像。我想显示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">

我的情况与此小提琴类似，但是在这里它适用于img URL，但是在我的具有实际文件路径的情况下，它不起作用。

正确的方法应该是什么？

第575篇《Vue.js动态图像不起作用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Pro小卤蛋A 2020.03.11

这是非常简单的答案。：D

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="`../assets/${pic}.png`" v-bind:alt="pic">
</div>
斯丁十三 2020.03.11

您可以尝试该require功能。像这样：

<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android