vue的三种图片引入方式

版权声明： https://blog.csdn.net/weixin_41187842/article/details/84534146

在vue中使用拼接图片时，会出现图片无法识别的情况

<img :src="item=='seat' ? '../../statices/img/text1.png' : ' ../../statices/img/text2.png' " />

此时图片有可能无法识别，需要将图片单独引入。

首先给图片地址绑定变量

<template>

    <img :src="img_url">

</template>

在script中设置变量

<script>

    //方法1.直接将图片引入为模块

    require img_url from "../assets/test.png"

    //方法2.将img_url放在数据里

    data(){

        return {

            img_url:require("../assets/test.png")

        }

    }

    //方法3.在生命周期函数中设置

    data(){

        return {

            img_url:""

        }

    }

    created(){

        this.img_url= require("@/"+urlTemp)

    }

</script>