Vue中定义src在img标签使用时加载不出来的解决
作者：Live&&learn
这篇文章主要介绍了Vue中定义src在img标签使用时加载不出来的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue中定义src在img标签使用时加载不出来
问题
路径正确，但是图片加载不出来，如下示例：
<!--vue3的语法，vue2类似-->
<template>
<img :src=""/>
</template>
<script setup>
import {ref} from 'vue';
const src = ref('图片路径')；
</script>代码和路径都没问题，发现图片并未显示
解决一：使用require引入图片（commonJs语法）
如果项目中使用的是vite，vite中是不支持require引用的。控制台报错：require is not defined
这个时候就需要下载commonJs包
// 下载安装commonjs包--vite3
yarn add vite-plugin-commonjs
// vite2中可以安装这个
npm i @rollup/plugin-commonjs
//2.在vite.config.ts配置中添加该插件（如果是js就换成js版的）
import commonjs from '@rollup/plugin-commonjs';
const plugins = [
commonjs() as any,// 要放在第一行，否则不生效
];解决二（使用vite的话，推荐这种方案）
// import.meta.url是当前模块的url，和图片的相对路径合并就是一个完整的URL
const list = ref(
[{
src: new URL('相对路径', import.meta.url).href,
}]
)Vue中img标签的src属性总结
初步接触vue框架时,好多朋友使用img标签时,设置动态src属性时,可能都会遇到路径不生效的问题,咱们废话不多说,开整!!!
img标签引用资源图片
一般不需要webpack处理的资源放在static,需要经过处理的放在assets
1.不需要webpack处理的图片放在static
不需要webpack处理的图片,直接使用绝对路径调用图片,如"/static/xx/xxx.png"
栗子
- html代码
<img v-bind:src="imgUrl"/>
- js代码
data(){
return{
imgUrl:"/static/logo.png"
}
}成功读取到了logo.png. 执行npm run build后查看dist文件，发现logo.png原封不动地放在了根目录下。
2.需要webpack处理的图片放在assets
可以使用import还是require进行引入.import为es6语法,require为commonJS形式.
- 栗子1
<img class="logo-img" src="@/assets/images/logo.png" alt="logo" />
- 栗子2
<img :src="require('@/assets/images/sidederLogo.png')" class="sidebar-logo">- 栗子3
//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
return{
imgUrl:require('./assets/logo.png')
}
}也可以直接引用网络路径
//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
return{
imgUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
}
}最后
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。