zoukankan      html  css  js  c++  java
  • 如何在vue中引入图片?

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形:

    使用一、

    我们在data里面定义好图片路径

    imgUrl:'../assets/logo.png'
    

    然后,在template模板里面

    <img :src="imgUrl">
    /*或者*/
    <img src="../assets/logo.png">
    

    这种方式是按照正常HTML语法引用路径,放在模板里可以被webpack打包出来。

    使用二、

    当我们需要在js代码里面写图片路径的时候,
    如果我们在data里面写

    imgUrl:'../assets/logo.png'
    

    此时webpack只会把它当做字符串处理从而找不到图片地址,

    此时我们可以使用import引入图片路径:

    <img :src="avatar" />
    import avatar from '@/assets/logo.png'
    

    在data里面定义

    avatar: avatar
    

      

  • 相关阅读:
    Jzoj5542 董先生的钦点
    Jzoj5542 董先生的钦点
    (各种)FFT模板
    (各种)FFT模板
    Jzoj3528 图书馆
    Jzoj3528 图书馆
    Jzoj5317 Func
    Jzoj5317 Func
    Jzoj3591 数据
    【UVa11021】Tribles
  • 原文地址:https://www.cnblogs.com/coober/p/8466198.html
Copyright © 2011-2022 走看看