vue中动态绑定图片

liuqiancsdn1558

于 2022-07-13 11:50:45 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签：大数据

本文链接：https://blog.youkuaiyun.com/liuqiancsdn1558/article/details/125760769

本文探讨了如何在Vue组件中动态绑定图片src路径，通过两种不同的方式展示了使用相对路径和require函数加载图片的区别，揭示了路径规范对图片显示的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>