文章目录
- 踩坑 | 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:图片很多,需要循环利用其地址,文章来源:https://www.uudwc.com/A/qRE3P/
解决办法2
之前的写法image_src
的类型是字符串,现在的写法image_src
是require
引用之后的返回值。
之前就算img
标签动态使用image_src
,值也是从默认的字符串变为image_src
本身(也是一个字符串)文章来源地址https://www.uudwc.com/A/qRE3P/
//html
<img :src="image_src " />
//js
const image_src = require('@viewer/assets/toolbar-icons/coronaryArtery.png');