vue引入图片url变量

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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"