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

落日映苍穹つ 2022-12-07 15:12 611阅读 0赞

![20210405204747861.png][]

//直接写路径
    <img src="@/assets/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";
    data() {
        return {
          imgUrl1:'../../static/logo.png'
          imgUrl2:require('./assets/logo.png')
          activeIcon: radio1,
        };
      },
    <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;

[20210405204747861.png]: /images/20221123/d5c5ce561ef24656a415f36c8b13d903.png

发表评论取消回复

表情：

评论列表（有 0 条评论，611人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js框架--绑定图片几种方式

![70][] 方式一：  <img src="src/assets/logo.png" /> 方式二：

古城微笑少年丶/ 2024年02月19日 12:11/ 0 赞/ 72 阅读

相关 vue项目中的图片路径动态绑定问题

动态绑定在data中引入的时候，必须使用require { icon: require('@/assets/images/modules-a

悠悠/ 2023年07月19日 12:21/ 0 赞/ 30 阅读

相关【Vue】--关于 vue动态绑定class的几种方式

\\\\\对象方法 \-最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）：class=“{‘active’:isTrue}”

逃离我推掉我的手/ 2023年06月02日 13:58/ 0 赞/ 15 阅读

相关 Vue项目中动态绑定src路径

问题1 vue项目中图片路径为变量时不能显示，如下 <img :src="imgSrc" alt=""> this.MyimgSrc = ‘../../

野性酷女/ 2023年05月30日 15:58/ 0 赞/ 37 阅读

相关 Vue 绑定图片Src路径的几种方式

![20210405204747861.png][] //直接写路径 <img src="@/assets/logo.png" alt="">

落日映苍穹つ/ 2022年12月07日 15:12/ 0 赞/ 612 阅读

相关 Vue中img的src属性绑定

<img src="./img/red.png'" /> // 页面显示图片如果遇到图片是动态的，也就是说在不同情况下显示不同的图片，也就是下面使用的属性绑定

﹏ヽ暗。殇╰゛Y/ 2022年05月18日 06:15/ 0 赞/ 252 阅读

相关【Vue】在vue-cli中绑定图片src属性

最近在做项目的时候碰到这个问题了，搞了半天解决了，记录一下先来看一下vue-cli生成的项目目录： ![在这里插入图片描述][70] 一开始我是把img放在asse

ゝ一世哀愁。/ 2022年05月17日 13:04/ 0 赞/ 209 阅读

相关 vue-cli图片绑定显示，v-bind:src=''

源码： <template> <div id="app"> <router-view/> <img :src="s" al

ゞ浴缸里的玫瑰/ 2022年03月07日 05:50/ 0 赞/ 209 阅读

相关 Vue绑定class的几种方式

1. 对象语法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

淡淡的烟草味﹌/ 2021年09月27日 13:28/ 0 赞/ 329 阅读

相关 vue 动态绑定img的src属性,图片失效

静态绑定都不失效动态绑定src时： 1、放置在static文件夹内的图片,可直接动态绑定不失效 2、放置在其他文件夹的图片,动态绑定

╰半橙微兮°/ 2021年07月25日 00:41/ 0 赞/ 812 阅读