踩坑 | vue动态绑定img标签src属性的一系列报错

文章目录

踩坑 | vue项目运行后使用require()图片也不显示

问题描述

在网上查阅之后,发现结论是在使用vue动态加载图片时,必须使用require。但是采用了这种写法发现都不显示。

require是在运行时加载,import是编译时加载 ,如果需要使用import就提前导入图片。

js 复制代码
<img :src="imgUrl" />

//js
import logo from "../assets/logo.png";
const imgUrl = logo;

不显示图片的写法

js 复制代码
<img :src="imgSrc"></img>
<img :src="require(imgSrc)"></img>

//js
const imgSrc = '@common/resources/images/coronaryArtery.png'

问题 :通过控制台查看并没有解析该地址的图片,

vue中动态设置img的src不生效问题的原因

js 复制代码
<template>
    <img :src="img_src">
</template>
<script lang="ts" setup>
const img_src = './assets/icons/home.svg'
</script>

控制台查看发现src地址没有解析,网上很多说原因是webpack的问题?这里我看了下没有理解到。

我理解的是动态绑定src,src去读取img_src变量的值,该变量的值就是一个字符串,所以最后显示的是字符串没有解析地址去获取图片。

使用require生效的原因,是src读取的值变成了require的返回值。

require is not defined

vue3+typeScript使用require方法引入图片的时候会报错require is not defined

网上的说法是:因为requirewebpack提供的一种加载能力,但是vue3项目时搭配vite的,所以这里应该用vite提供的静态资源载入方法,

vite官网的静态资源载入方法

解决办法

虽然img_src的值也是字符串,但是一个网站可以访问。

js 复制代码
<img :src="img_src">

//下面两种写法都可以
const img_src = new URL(`./assets/icons/home.svg`, import.meta.url).href;//http://localhost:5173/src/assets/icons/home.svg
const img_src = new URL(`./assets/icons/home.svg`, import.meta.url);

解决办法1:src属性直接传入地址

img标签的src属性中直接传入地址

该方法适合于单图片的页面

js 复制代码
<img src="@common/resources/images/coronaryArtery.png" />
<img :src="require('@common/resources/images/coronaryArtery.png')" />

常见场景:不满足

场景1:img标签都在被封装好的组件内部,我们利用组件的属性将地址值传递。

场景2:图片很多,需要循环利用其地址,

解决办法2

之前的写法image_src的类型是字符串,现在的写法image_srcrequire引用之后的返回值。

之前就算img标签动态使用image_src,值也是从默认的字符串变为image_src本身(也是一个字符串)

js 复制代码
//html
<img :src="image_src " />
//js
const image_src = require('@viewer/assets/toolbar-icons/coronaryArtery.png');
相关推荐
CptW2 分钟前
Vue3 的“批量渲染”机制
vue.js·面试
计算机学姐13 分钟前
基于SpringBoo+Vue的医院预约挂号管理系统【个性化推荐算法+可视化统计】
java·vue.js·spring boot·mysql·intellij-idea·mybatis·推荐算法
计算机学姐28 分钟前
基于微信小程序的奶茶店点餐平台【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
东方石匠1 小时前
Javascript常见面试题
前端·javascript·面试
性野喜悲1 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
敲敲了个代码2 小时前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
change_fate2 小时前
vue3 懒加载第三方组件
javascript·vue.js·ecmascript
扎瓦斯柯瑞迫2 小时前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端
前端付豪2 小时前
Vue3 响应式来!
前端·javascript·vue.js
Dontla2 小时前
JS睡眠函数(JS sleep()函数、JS单线程、Event Loop事件循环)假睡眠
开发语言·javascript·ecmascript