时间戳

首页 > 解决方案 > img 标签正确显示图像，但 v-bind 不正确

html - img 标签正确显示图像，但 v-bind 不正确

问题描述

            <div class="row">
                <div :key="map.name" v-for="map in match.maps" class="col-lg-4 mt-5">
                    <img width="100" height="50" src="../assets/ovp.png">
                    <img v-bind:src="'../assets/' + map.name + '.png'">
                    {{ map.name }}
                </div>
            </div>

上面示例中的图像标签确实显示了图像，但是 v-bind 指令没有。什么是不正确的？检查代码时，它看起来像这样：

<div data-v-780f357b="" class="col-lg-4 mt-5">
  <img data-v-780f357b="" src="/img/ovp.3ffb145b.png" width="100" height="50">
  <img data-v-780f357b="" src="../assets/ovp.png">
  ovp
</div>

这是网站的外观

标签： htmlcssimagevue.js

解决方案

这是有效的！:)

v-bind:style="{backgroundImage: 'url(' + require('@/assets/' + map.name + '.png') + ')'}"

推荐阅读