vue引入图片url变量

1.引入方式

普通引入

<template>
    // 普通引入
      
    // webpack编译处理后:
    
<template>

变量引入

<template>
    // 变量引入
    
    // webpack编译处理后:
    
template>

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

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

2.解决方法

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

方法1: 把imgUrl放在数据中

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

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

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

<template>
    
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"