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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习DAY3:FFNNLM前馈神经网络语言模型

1 神经网络语言模型NNLM的提出 文章&#xff1a;自然语言处理中的语言模型预训练方法&#xff08;ELMo、GPT和BERT&#xff09; https://www.cnblogs.com/robert-dlut/p/9824346.html 语言模型不需要人工标注语料&#xff08;属于自监督模型&#xff09;&#xff0c;所以语言…

[架构之路-235]:目标系统 - 纵向分层 - 数据库 - 数据库系统基础与概述:数据库定义、核心概念、系统组成

目录 一、核心概念 1.1 什么是数据与信息 1.2 数据与数据库的关系 1.3 什么是数据库 1.4 数据库中的数据的特点 1.5 数据库与数据结构的关系 二、数据库系统 2.1 什么是数据库管理系统 2.2 什么是数据库系统 2.3 数据库相关的人员 2.4 数据库的主要功能 2.5 Excel表…

【计算机网络-自顶向下方法】应用层(SMTP、POP3、DNS)

目录 1. Electronic Mail电子邮件应用画像1.1 电子邮件系统1.2 邮件报文格式1.3 邮件访问 2. DNS&#xff08;Domain Name System&#xff09;2.1 DNS提供的服务2.2 DNS工作机理2.3 DNS资源记录2.4 DNS协议&#xff0c;报文2.5 小结 1. Electronic Mail 电子邮件应用画像 应用…

企业如何使用CRM客户管理系统全面了解客户

B2B业务由于决策链长&#xff0c;涉及的部门和人员多&#xff0c;购买周期短则2、3个月&#xff0c;长则一年半载的原因一直被大家痛呼难做。B2B业务要求企业去认识客户&#xff0c;更要深入地了解客户。基于这种需求&#xff0c;使用CRM客户管理系统是企业全面了解客户的重要手…

Zabbix第二部分:基于Proxy分布式部署实现Web监控和Zabbix HA集群的搭建

代理和高可用 一、基于zabbix-proxy的分布式监控1.1 分布式监控的作用1.2 数据流向1.3 构成组件 二、部署zabbix代理服务器Step1 前置准备Step2 设置 zabbix 的下载源&#xff0c;安装 zabbix-proxyStep3 部署数据库并将zabbix相关文件导入Step4 修改zabbix-proxy的配置文件&am…

【排序算法】选择排序

文章目录 一&#xff1a;基本介绍1.1 概念1.2 算法思想1.3 思路分析图1.4 思路分析1.5 总结1.5.1 选择排序一共有数组大小-1轮排序1.5.2 每一轮排序&#xff0c;又是一个循环&#xff0c;循环的规则如下&#xff08;在代码中实现&#xff09;&#xff1a; 二&#xff1a;代码实…

VueRouter与expres/koa中间件的关联

ueRouter: runQueue 路由守卫都是有三个参数to,from,next。其中next就是下方的fn执行时候传入的第二个参数(回调函数)&#xff0c;只有该回调执行后才会挨个遍历queue内的守卫。 中间件的作用 隔离基础设施与业务逻辑之间的细节。详细的内容位于《深入浅出Node.js》P210 另外一…

CSS设置鼠标样式和添加视频样式

鼠标的样式 <div style"cursor: default">默认鼠标的样式</div><div style"cursor: pointer">小手样式</div><div style"cursor: move">移动样式</div><div style"cursor: text">文本样式&…

Twitter优化秘籍:置顶、列表、受众增长

在 Twitter 上&#xff0c;将你的一条推送文置顶到个人数据顶部是提高可见性和吸引关注者的绝佳方式。无论你是个人用户还是企业&#xff0c;此功能都可以让你的重要信息常驻在众人眼前&#xff0c;即使你发布了新的推文。接下来&#xff0c;我们将分享一些优化建议&#xff0c…

防雷排插的防雷应用以及解决方案

防雷排插是一种能够有效防止雷电对电器设备造成损坏的电源插座。防雷排插的应用&#xff0c;原理和作用如下&#xff1a; 地凯科技防雷排插的应用&#xff1a;防雷排插主要用于保护电脑&#xff0c;电视&#xff0c;音响等电子设备免受雷击或者电网过压的影响。防雷排插通常有…

随着 ChatGPT 凭借 GPT-4V(ision) 获得关注,多模态 AI 不断发展

原创 | 文 BFT机器人 在不断努力让人工智能更像人类的过程中&#xff0c;OpenAI的GPT模型不断突破界限GPT-4现在能够接受文本和图像的提示。 生成式人工智能中的多模态表示模型根据输入生成文本、图像或音频等各种输出的能力。这些模型经过特定数据的训练&#xff0c;学习底层模…

学生台灯买什么样的好?双十一学生台灯推荐

不得不说光线会孩子的影响还是蛮大的&#xff0c;不仅会影响学习的效率&#xff0c;还会影响视力健康。很多家长认为孩子近视的主要原因是玩电子产品或者不良的坐姿、用眼习惯导致的&#xff0c;其实这些并不全是造成近视的因素&#xff0c;最主要的原因还是长时间的用眼导致的…

HTML5使用html2canvas转化为图片,然后再转为base64.

介绍 场景&#xff1a;今天同事提了个协助&#xff0c;将HTML5文件中的元素转为图片&#xff0c;并且最终转为base64格式传给后端。感觉还挺有意思就记录下。&#xff08;试例如下&#xff09; 步骤一&#xff1a;引入html2canvas 的js源码 html2canvas.min.js 下载地址 htt…

【密码学】Java实现DH函数时出现“Unsupported secret key algorithm: AES“错误

问题描述 jdk版本&#xff1a;8 使用DH和AES算法&#xff0c;实现密钥的交换和加密&#xff0c;测试时报错 java.security.NoSuchAlgorithmException: Unsupported secret key algorithm: AESat com.sun.crypto.provider.DHKeyAgreement.engineGenerateSecret(DHKeyAgreement…

vue 项目打包性能分析插件 webpack-bundle-analyzer

webpack-bundle-analyzer 是 webpack 的插件&#xff0c;需要配合 webpack 和 webpack-cli 一起使用。这个插件可以读取输出文件夹&#xff08;通常是 dist&#xff09;中的 stats.json 文件&#xff0c;把该文件可视化展现&#xff0c;生成代码分析报告&#xff0c;可以直观地…

高效数据传输:Java通过绑定快速将数据导出至Excel

摘要&#xff1a;本文由葡萄城技术团队原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 把数据导出至 Excel 是很常见的需求&#xff0c;而数据的持久化&#xff0c;往往又放在…

2023年入职/转行网络安全,该如何规划?

前言 前段时间&#xff0c;知名机构麦可思研究院发布了 《2022年中国本科生就业报告》&#xff0c;其中详细列出近五年的本科绿牌专业&#xff0c;其中&#xff0c;信息安全位列第一。 网络安全前景 对于网络安全的发展与就业前景&#xff0c;想必无需我多言&#xff0c;作为…

SQL sever中的视图

目录 一、视图概述&#xff1a; 二、视图好处 三、创建视图 法一&#xff1a; 法二&#xff1a; 四、查看视图信息 五、视图插入数据 六、视图修改数据 七、视图删除数据 八、删除视图 法一&#xff1a; 法二&#xff1a; 一、视图概述&#xff1a; 视图是一种常用…

亚马逊测评工作室应该如何开展,需要准备哪些?

亚马逊测评自养号项目需要用到哪些资源呢&#xff1f;1. 防火墙独立的环境 纯净IP注册资料收货地址支付卡邮箱及手机号 想做好这个项目以上的资源缺一不可 我们先来说说养号的环境&#xff0c;养号的环境在以前的文章里也提到过&#xff0c;有很多种方案&#xff0c;我们曾经…

JUC并发编程:Monitor和对象结构

JUC并发编程&#xff1a;Monitor和对象结构 1. Monitor1.1 对象的结构1.1.1 MarkWord1.1.2 Klass Word1.1.3 数组长度1.1.4 &#x1f330; 1. Monitor Monitor官方文档 我们可以把Monitor理解为一个同步工具&#xff0c;也可以认为是一种同步机制。它通常被描述为一个对象&…