uniapp vue3 静态图片引入

news2024/10/3 2:18:12

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

代码
<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>
展示 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1071946.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

材质、纹理、贴图的区别和关联

1、材质、纹理、贴图的概念 材质&#xff08;Material&#xff09;、纹理&#xff08;Texture&#xff09;、贴图&#xff08;Texture Map&#xff09;是计算机图形学中的三个概念&#xff0c;它们之间存在关系但也有一些区别。 材质&#xff08;Material&#xff09;是描述物…

计算机竞赛 题目:基于深度学习的中文汉字识别 - 深度学习 卷积神经网络 机器视觉 OCR

文章目录 0 简介1 数据集合2 网络构建3 模型训练4 模型性能评估5 文字预测6 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的中文汉字识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &a…

爬虫破解:解决CSRF-Token反爬问题 - 上海市发展和改革委员会

标题:爬虫破解:解决CSRF-Token反爬问题 - 上海市发展和改革委员会 网址:https://fgw.sh.gov.cn/fgw-interaction-front/biz/projectApproval/home MD5加密:ca7f5c978b1809d15a4b228198814253 需求文档 采集数据如下所示: 解决反爬思路 这里只提供解决思路,解决反爬,…

30 数据分析(上)(业务略写可跳)|jupyter|matplotlib

文章目录 数据科学领域概述数据如何驱动运营给企业带来价值岗位关键词说明业务的商业模式 数据指标数据指标定义及常用数据指标如何选取指标分析角度计数流量导向的工具内容导向的工具用户导向的工具业务导向的工具 数据分析方法对比分析多维分析漏斗分析留存分析总结 用户画像…

基于Java的医护人员排班系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

Python教程——配置环境,再探IDE

文章目录 一、Python安装下载安装验证 二、第一个Python程序常见问题 三、Python解释器四、PyCharm工具安装和配置安装使用PyCharm基本使用 一、Python安装 下载 如果我们想要使用Python语言编写程序&#xff0c;我们必须下载Python安装包并配置Python环境&#xff0c;我们现…

如何防止重复提交订单?

重复提交原因 其实原因无外乎两种&#xff1a; 一种是由于用户在短时间内多次点击下单按钮&#xff0c;或浏览器刷新按钮导致。 另一种则是由于Nginx或类似于SpringCloud Gateway的网关层&#xff0c;进行超时重试造成的。 常见解决方案 方案一&#xff1a;提交订单按钮置灰 …

用Blender制作YOLO目标检测器训练数据

推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 本文将介绍一种非常有吸引力的机器学习训练数据的替代方案&#xff0c;用于为给定的特定应用程序收集数据。 无论应用程序类型如何&#xff0c;这篇博文都旨在向读者展示使用 Blender 等开源资源生成合成数据&#xff08;S…

一盏茶的功夫帮你彻底搞懂JavaScript异步编程从回调地狱到async/await

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 &#x1f4d8; 1. 引言 &#x1f4d8; 2. 使用方法 &#x1f4d8; 3. 实现原理 &#x1f4d8; 4. 写到最后…

Linux I/O多路复用 select poll epoll

简介 select函数 poll函数 epoll函数

yolov7车牌识别(12种中文车牌类型)

12种中文车牌类型&#xff1a; 1.单行蓝牌 2.单行黄牌 3.新能源车牌 4.白色警用车牌 5 教练车牌 6 武警车牌 7 双层黄牌 8 双层武警 9 使馆车牌 10 港澳牌车 11 双层农用车牌 12 民航车牌 测试demo: 以yolov7-lite-s 为例: python detect_rec_plate.py --detect_model weigh…

408专题--计算机网络4W字完整版-考研专用

文章目录 前言1.计算机网络体系结构1.1 计算机网络概述1.2 计算机网络的功能1.3 计算机网络的组成1.4 计算机网络分类按照分布范围分类按照交换技术分类按照使用者分类按照传输技术分类按传输介质分类按照拓扑结构分类 1.5 计算机网络的性能指标1.6 计算机网络体系结构1.7 计算…

使用poi-tl循环导出word报表

先看模板和导出的效果 模板 效果 根据模板循环生成表格&#xff0c;每个表格再循环填充数据&#xff0c;也就是两层循环&#xff0c;第一层循环是学生学期信息&#xff0c;第二层循环是学生的成绩数据。 第一个循环 {{?listTable}} {{/}}第二个循环 {{reportList}} 表格…

关于:未同意隐私政策,应用获取ANDROID ID问题

我在提交华为应用时&#xff0c;总是提示【未同意隐私政策&#xff0c;应用获取ANDROID ID个人信息】&#xff0c;但是我已经全部去掉了&#xff0c;后面问了人工客服&#xff0c;反馈了如下信息 调用堆栈 com.unity3d.player.UnityPlayer.nativeRender(Native Method), com.un…

ViewStub

1.作用 1.性能优化&#xff1a; 用到的时候再去加载&#xff0c;不调用加载的话&#xff0c;不会显示 2.使用 1.xml 其中hecate_listview2x为里面加载的布局 <ViewStubandroid:id"id/hecate1_recycler_vs"android:layout_width"match_parent"andr…

python pytorch- TextCNN TextRNN FastText Transfermer (中英文)文本情感分类实战(附数据集,代码皆可运行)

python pytorch- TextCNN TextRNN FastText Transfermer 文本情感分类实战&#xff08;附数据集&#xff0c;代码皆可运行&#xff09; 注&#xff1a;本次实验&#xff0c;主要注重代码实现这些模型&#xff0c;博主的数据集质量较差&#xff0c;模型评估效果并不是十分理想&…

Springboot之AOP的执行顺序

AOP执行顺序验证 项目引入了依赖。自动开启了aop的配置。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId></dependency>切面上配置Order注解 切面类AopTest1&#xff0c;ord…

华为ICT——第三章图像处理基本任务

目录 1&#xff1a;数字图像处理的层次&#xff1a;&#xff08;处理-分析-理解&#xff09;顺序不能错&#xff1a; 2&#xff1a;图像处理&#xff08;图像处理过程&#xff09;&#xff1a; 3&#xff1a;图像分析&#xff08;特征提取&#xff09;&#xff1a; 4&#x…

vue3前端开发-开发环境安装篇

文章目录 1.安装nvm2.设置安装源为淘宝镜像3.通过nvm安装nodejs4. 安装pnpm4.1 安装pnpm4.2 配置 5.创建vite-vue项目6. vue3demo目录结构7. 扩展插件安装8. 用户代码片段8.1 设置8.2 快速生成代码 1.安装nvm 如果本地已经安装了nodejs&#xff0c;请先卸载。 nvm主要的作用就是…

ES系列十二、ES的scroll Api及分页实例

1.官方api 1.Scroll概念 Version&#xff1a;6.1 英文原文地址&#xff1a;Scroll 当一个搜索请求返回单页结果时&#xff0c;可以使用 scroll API 检索体积大量&#xff08;甚至全部&#xff09;结果&#xff0c;这和在传统数据库中使用游标的方式非常相似。 不要把 scroll 用…