大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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"
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/190805.html原文链接：https://javaforall.net
