Vue3 动态渲染 img 的 :src

基本使用 相对路径引用

必须加 require

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

进阶使用

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

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

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

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