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>
展示
相关推荐
Cacciatore->32 分钟前
Electron 快速上手
javascript·arcgis·electron
vvilkim40 分钟前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端2 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头3 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz3 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子3 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边3 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客3 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8883 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家3 小时前
微信小店与微信小程序简单集成指南
前端