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

文章目录 踩坑 | vue项目运行后使用require()图片也不显示问题描述vue中动态设置img的src不生效问题的原因require is not defined 解决办法1：src属性直接传入地址解决办法2

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

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

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

<img :src="imgUrl" /> //js import logo from "../assets/logo.png"; const imgUrl = logo;

不显示图片的写法

<img :src="imgSrc"></img> <img :src="require(imgSrc)"></img> //js const imgSrc = '@common/resources/images/coronaryArtery.png'

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

vue中动态设置img的src不生效问题的原因 <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 网上的说法是：因为require是webpack提供的一种加载能力，但是vue3项目时搭配vite的，所以这里应该用vite提供的静态资源载入方法，

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

解决办法

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

<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属性中直接传入地址 该方法适合于单图片的页面

<img src="@common/resources/images/coronaryArtery.png" /> <img :src="require('@common/resources/images/coronaryArtery.png')" />

常见场景：不满足 场景1：img标签都在被封装好的组件内部，我们利用组件的属性将地址值传递。 场景2：图片很多，需要循环利用其地址，

解决办法2

之前的写法image_src的类型是字符串，现在的写法image_src是require引用之后的返回值。 之前就算img标签动态使用image_src，值也是从默认的字符串变为image_src本身(也是一个字符串)

//html <img :src="image_src " /> //js const image_src = require('@viewer/assets/toolbar-icons/coronaryArtery.png');