1.引入方式

普通引入

<template>
    // 普通引入
    <img src = "../assets/images/01.jpg">  
    // webpack编译处理后:
    <img src = "/img/01.f0afc36d.jpg">
<template>

变量引入

<template>
    // 变量引入
    <img :src = "imgUrl">
    // webpack编译处理后:
    <img src = "'../assets/images/01.jpg'" >
</template>

<script>
export default{
    data(){
        return{
            imgUrl: "../assets/images/01.jpg"
        }
    }
}
</script>

可见，此时图片将不会显示，路径是错误的，因为使用 :src 调用了 v-bind 指令处理其内容，相对路径不会被webpack的 file-loader 处理。

2.解决方法

当路径的文件名需要拼接变量的时候，可使用 require() 引入。

方法1: 把imgUrl放在数据中

<template>
    <img :src = "require('../assets/images/'+imgUrl) ">
    // 这里的 :src = require()需像这样采用字符串拼接的形式或者直接写一个字符串，不能直接绑定变量如require(imgUrl)
</template>

<script>
export default{
    data(){
        return{
            imgUrl: "01.jpg"
        }
    }
}
</script>

方法2: 在生命周期函数中设置

<template>
    <img :src = "imgUrl ">
</template>

<script>
export default{
    data(){
        return{
            imgUrl: ""
        }
    },
    created() {
        let url = "assets/images/01.jpg";
        this.imgUrl = require("@/" + url)
    }
}
</script>

方法3: 直接将图片引入为模块

require imgUrl from "../assets/images/01.jpg"