Vue3 动态渲染 img 的 :src

文章目录

• • 基本使用 `相对路径引用`
  • 进阶使用

基本使用 相对路径引用

必须加 require

 <img :src="require('../../assets/img/')"/>

进阶使用

我此处引用了:src 是为了humbarger点击改变左侧菜单栏（隐藏和显现）

若想动态渲染，可使用computed会动态监视值的改变从而改变图片。

<img class="hamburgerImage" :src="hamburgerImage"/>

// hamburgerImage监听属性变化动态
let hamburgerImage = computed(() => {
  // hamburger点击值，由父组件传入
  if (props.asideMenuVisible == true) {
    return require('../../assets/img/');
  } else if (props.asideMenuVisible == false) {
    return require('../../assets/img/');
  }
})