Vue 绑定图片Src路径的几种方式、引入图片

林中明月间。

已于 2025-04-16 13:44:50 修改

阅读量1.9w

点赞数 10

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

于 2020-09-24 15:11:55 首次发布

原文链接：https://blog.csdn.net/qq_33744228/article/details/81319485

版权

Vue.js 专栏收录该内容

195 篇文章

订阅专栏

//直接写路径 3中都行
<img src="~@/assets/images/logo.png" alt=""> <!--推荐这种-->
<img src="~assets/images/logo.png" alt="">
<img src="@/assets/images/logo.png" alt=""> <!--有的情况不能显示-->

//绑定：
<img :src="require('./assets/images/03.jpg')" alt="">
// 三元绑定
<img :src="OnOff?require('@/assets/icon_bluecore.png'):require('@/assets/icon_core.png')" alt="" />

//引入
import radio1 from "@/assets/images/icon_radioon.png";
import welimg from '@/assets/images/login-background2.jpg'
data() {
    return {
      welimg,
      imgUrl1:'../../static/logo.png'
      imgUrl2:require('./assets/logo.png')
      activeIcon: radio1,
    };
  },
<img :src="welimg" alt="">
<img class="img-icon" :src="activeIcon" />

<img :src="imgUrl1">

<img :src="imgUrl2">

<img src="~@/assets/logo.png" alt="">
 
<li v-for ="item in images" :key="i">
    <img :src="item" alt="">
</li>
 
images: [
   { src: require('@/assets/images/icon_banner.png1')},
   { src: require('@/assets/images/icon_banner2.png')},
],
路径拼接：:src=" baseUrl+imgurl "
created(){this.baseStatic = BaseApi.baseStatic}

背景图
background: url('~@/assets/images/quanbg.png') no-repeat center;