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

落日映苍穹つ 2022-12-07 15:12 588阅读 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 条评论，588人围观）

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

相关阅读

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

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

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

相关 Vue显示图片的几种方式

前言最近在做自己的项目，有这么一个需求，用户列表需要展示用户的头像，之前一直没有处理，趁着这次机会，正好分享下我的解决过程。头像这一栏空荡荡的，我这种强迫症患者难受

心已赠人/ 2023年09月24日 16:38/ 0 赞/ 70 阅读

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

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

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

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

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

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

相关 Vue中img的src属性绑定

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

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

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

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

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

相关 vue06-三种数据绑定方式

<!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8"/

系统管理员/ 2022年05月10日 00:04/ 0 赞/ 208 阅读

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

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

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

相关 Vue绑定class的几种方式

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

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

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

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

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