uniapp vue3 静态图片引入

方法一 从新定义路径 一定看好你图片的路径

代码
复制代码
<template>
    <div class="main">
        Main
        <img :src="getImg()" alt="">
    </div>
</template>

<!-- 方式一
// <script setup>
// let imgName = 'logo.png'
// const getImg = () => {
//     return new URL(`/static/${imgName}`, import.meta.url).href;
// }
// </script> -->

<!-- 方式二 -->
<script >
	export default {
		setup(){
			const imgName = 'logo.png'
			
			function getImg (){
				// 从新定义了一下图片路径  返回返回一下 
				return new URL(`/static/${imgName}`, import.meta.url).href;
			}
			return{
				imgName,
				getImg
			}
		}
	}

</script>

展示

方法二

代码
复制代码
<template>
	<div v-for="item in services.items" :key="item.icon">
		  <img :src="item.icon" />
		<p>{{item.label}}</p>
	</div>
</template>
<script setup>
	const services = {
		title: '园区服务',
		items: [{
				icon: '/static/logo.png',
				label: '招租发布',
				path: '/pages/index/index',
			},
			{
				icon: '/static/faxian.png',
				label: '手续办理',
				path: '/pages/index/index',
			},
		],
	};

</script>
展示
相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku3 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode3 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu3 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu3 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu3 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu3 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu3 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在3 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net