网站素材,软件外包公司主营业务,申请手机网站,wordpress做个SNS文章目录 踩坑 | vue项目运行后使用require()图片也不显示问题描述vue中动态设置img的src不生效问题的原因require is not defined 解决办法1#xff1a;src属性直接传入地址解决办法2 踩坑 | vue项目运行后使用require()图片也不显示
问题描述
在网上查阅之后#xff0c;发… 文章目录 踩坑 | vue项目运行后使用require()图片也不显示问题描述vue中动态设置img的src不生效问题的原因require is not defined 解决办法1src属性直接传入地址解决办法2 踩坑 | vue项目运行后使用require()图片也不显示
问题描述
在网上查阅之后发现结论是在使用vue动态加载图片时必须使用require。但是采用了这种写法发现都不显示。
require是在运行时加载import是编译时加载如果需要使用import就提前导入图片。
img :srcimgUrl ///js
import logo from ../assets/logo.png;
const imgUrl logo;不显示图片的写法
img :srcimgSrc/img
img :srcrequire(imgSrc)/img//js
const imgSrc common/resources/images/coronaryArtery.png问题通过控制台查看并没有解析该地址的图片
vue中动态设置img的src不生效问题的原因
templateimg :srcimg_src
/template
script langts setup
const img_src ./assets/icons/home.svg
/script控制台查看发现src地址没有解析网上很多说原因是webpack的问题这里我看了下没有理解到。
我理解的是动态绑定src,src去读取img_src变量的值该变量的值就是一个字符串所以最后显示的是字符串没有解析地址去获取图片。 使用require生效的原因是src读取的值变成了require的返回值。
require is not defined
vue3typeScript使用require方法引入图片的时候会报错require is not defined 网上的说法是因为require是webpack提供的一种加载能力但是vue3项目时搭配vite的所以这里应该用vite提供的静态资源载入方法
vite官网的静态资源载入方法
解决办法
虽然img_src的值也是字符串但是一个网站可以访问。
img :srcimg_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);解决办法1src属性直接传入地址
在img标签的src属性中直接传入地址 该方法适合于单图片的页面
img srccommon/resources/images/coronaryArtery.png /
img :srcrequire(common/resources/images/coronaryArtery.png) /常见场景不满足 场景1img标签都在被封装好的组件内部我们利用组件的属性将地址值传递。 场景2图片很多需要循环利用其地址
解决办法2
之前的写法image_src的类型是字符串现在的写法image_src是require引用之后的返回值。 之前就算img标签动态使用image_src值也是从默认的字符串变为image_src本身(也是一个字符串)
//html
img :srcimage_src /
//js
const image_src require(viewer/assets/toolbar-icons/coronaryArtery.png);
