1. 程式人生 > >vue元件引入本地靜態圖片

vue元件引入本地靜態圖片

vue2元件引入本地圖片的的兩種方式:

1,使用@引入:

這是在元件內直接引用和普通的html方法一樣,程式碼如下

<img src="@/assets/test.png" alt="test.png">

2,使用vue的方法引入:

這是典型的vue思想,使用資料來操縱dom; 首先在元件內使用 import ... from 引入

import imgUrl from '../assets/test.png';

然後在data裡面宣告

data: function () {
            return {
                imgSrc: imgUrl
            }
        }

最後繫結資料

<img :src="imgSrc" alt="imgSr