vue中动态绑定图片

<template>
  <span class="icon">
    <img :src="homeNav[0].iconUrl">
  </span>
</template>

<script>
export default {
  data() {
    return {
      homeNav:[
        {
          iconUrl:"./assets/tubiao/img1_5_11.png"
        }
      ],
    };
  },
</script>

这样动态绑定图片的src发现根本不显示，只显示一个图片的标识

 

 改变data中图片路径的形式后就可以显示了

<template>
  <span class="icon">
    <img :src="homeNav[0].iconUrl">
  </span>
</template>

<script>
export default {
  data() {
    return {
      homeNav:[
        {
          iconUrl:require("./assets/tubiao/img1_5_11.png")
        }
      ],
    };
  },
</script>