Vue中定义src在img标签使用时加载不出来的解决

更新时间：2024年07月25日 08:59:02 作者：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'
	}	
}

最后

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue调取电脑摄像头实现拍照功能
这篇文章主要为大家详细介绍了vue调取电脑摄像头实现拍照功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Vue中@click.native的使用方法及场景
在组件中时常看到@click.native,在项目中遇到后,简单介绍下,这篇文章主要给大家介绍了关于Vue中@click.native的使用方法及场景的相关资料,需要的朋友可以参考下
2023-11-11
Nuxt3+ElementPlus构建打包部署全过程
网上大部分关于Nuxt打包部署教程可谓是可以用五花八门来形容,这对于第一次接触的朋友简直是无从下手,这篇文章主要给大家介绍了关于Nuxt3+ElementPlus构建打包部署的相关资料,需要的朋友可以参考下
2023-01-01
el-select绑定值遇到的问题小结
碰到一个问题,选择框的数据是后端传过来的,下拉框的数据也是后端传过来的,但是打开下拉框时,发现数据没有高亮,最后通过只要选择框v-model给的值和option的value绑定的值一致,就可以高亮,感兴趣的朋友一起看看吧
2023-12-12
Vue让router-view默认显示页面操作方法
一个home页面,点击左边的菜单栏,右边显示页面,因此都知道在右边放一个router-view然后配置路由即可,然而问题出现在：重新打开的时候,默认是白色空的,遇到这样的问题如何解决呢,下面小编给大家分享Vue让router-view默认显示页面操作方法,感兴趣的朋友一起看看吧
2024-03-03
vue路由守卫及路由守卫无限循环问题详析
这篇文章主要给大家介绍了关于vue路由守卫及路由守卫无限循环问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
Vue3组合式函数Composable实战ref和unref使用
这篇文章主要为大家介绍了Vue3组合式函数Composable实战ref和unref使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
这篇文章主要介绍了Vue+elementui 实现复杂表头和动态增加列的二维表格功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
element用脚本自动化构建新组件的实现示例
本文主要介绍了element-ui的用脚本自动化构建新组件的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
vue自定义表格列的实现过程记录
这篇文章主要给大家介绍了关于vue自定义表格列的相关资料,表格组件在开发中经常会用到,文章通过示例代码介绍的也很详细,需要的朋友可以参考下
2021-06-06