vue引入图片url变量问题

vue引入图片url变量问题

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"

本文转自：http://ydongabc.gitee.io/blog/2020/04/24/vue%E5%BC%95%E5%85%A5%E5%9B%BE%E7%89%87url%E5%8F%98%E9%87%8F/