学习文章:聊一聊vue中动态引入图片为什么是 require-CSDN博客
1. 静态引入
<img src="@/assets/image/banner.png" alt="" />
2. 动态引入
active:0,
iconHome: {
active: require("@/assets/image/home_active.png"),
inactive: require("@/assets/image/home.png"),
},
<img :src="active ? iconHome.active : iconHome.inactive" />
3. css background-image
建议使用 url(~绝对路径)不易出错
.bgStyle {
background-color: #f4f9ff;
background-image: url("~@/assets/image/bg.png");
background-size: 100%;
}