vue3项目使用＜img :src=““ /＞动态加载图片

分享一下使用<img :src="" />动态加载图片时遇到的问题以及解决方法。

下面是部分页面代码，这里我使用了<img :src="itemc.headUrl" />来动态加载图片

这时遇到了问题，因为这里的itemc.headUrl是图片的相对路径：../assets/images/AI.png，页面无法显示图片。

接着我试着使用require(`../assets/images/AI.png`)来解决，但是控制台看到报错了：SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=25d5f2e9' does not provide an export named 'require'。所以该方法无法解决我的问题。

最后，使用new URL(url, import.meta.url).href （第一个url为图片的相对路径）解决了问题：

headUrl: new URL(url, import.meta.url).href

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

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

相关文章

P450焕新而来，室内外两用+路径规划+YOLO点击跟踪，算力高达100TOPS

P450焕新而来，室内外两用+路径规划+YOLO点击跟踪，算力高达100TOPS

Prometheus 450&#xff08;简称P450&#xff09;是一款室内室外两用的中型轴距&#xff08;410mm&#xff09;无人机&#xff0c;基于F450基础飞行平台&#xff0c;搭载感知传感器二维平面激光雷达&#xff0c;双目深度相机等&#xff0c;配合软件Prometheus自主无人机系统和S…
阅读更多...
Java学习笔记29（泛型）

Java学习笔记29（泛型）

1.泛型 ArrayList<Dog> arrayList new ArrayList<Dog>(); //1.当我们ArrayList<Dog>表示存放到ArrayList集合中的元素是Dog类 //2.如果编译器发现添加的类型&#xff0c;不满足要求&#xff0c;就会报错 //3.在便利的时候&#xff0c;可以直接取出Dog类型而…
阅读更多...
论文笔记：Does Writing with Language Models Reduce Content Diversity?

论文笔记：Does Writing with Language Models Reduce Content Diversity?

iclr 2024 reviewer评分 566 1 intro 大模型正在迅速改变人们创造内容的方式 虽然基于LLM的写作助手有可能提高写作质量并增加作者的生产力&#xff0c;但它们也引入了算法单一文化——>论文旨在评估与LLM一起写作是否无意中降低了内容的多样性论文设计了一个控制实验&…
阅读更多...
空间数据索引的利器：R-Tree原理与实现深度解析

空间数据索引的利器：R-Tree原理与实现深度解析

空间数据索引的利器&#xff1a;R-Tree原理与实现深度解析 R-Tree的原理插入操作分裂操作查询操作 R-Tree的伪代码R-Tree的C语言实现讨论结论 R-Tree是一种平衡树&#xff0c;用于空间数据索引&#xff0c;特别是在二维或更高维度的几何对象存储和检索中。它由Antony Guttman和…
阅读更多...
关系抽取与属性补全

关系抽取与属性补全

文章目录 实体关系抽取的任务定义机器学习框架属性补全 实体关系抽取的任务定义 从文本中抽取出两个或者多个实体之间的语义关系&#xff1b;从文本获取知识图谱三元组的主要技术手段&#xff0c;通常被用于知识图谱的补全。美丽的西湖坐落于浙江省的省会城市杭州的西南面。&am…
阅读更多...
（C语言入门）数组

（C语言入门）数组

目录 什么是数组&#xff1f; 数组&#xff1a; 数组的使用&#xff1a; 数组的初始化&#xff1a; 数组名&#xff1a; 数组案例&#xff1a; 一维数组的最大值&#xff1a; 一维数组的逆置&#xff1a; 数组和指针&#xff1a; 通过指针操作数组元素&#xff1a; …
阅读更多...
亚马逊、Lazada、速卖通怎么提高复购率？如何利用自养号测评实现销量飙升

亚马逊、Lazada、速卖通怎么提高复购率？如何利用自养号测评实现销量飙升

对于跨境卖家来说&#xff0c;抓住客户是最重要的&#xff0c;很多卖家都把大部分心思放在如何吸引新客户上&#xff0c;忽视了已有客户的维护。其实相较于投广告、报秒杀活动吸引新客户&#xff0c;维护好已有客户&#xff0c;提升复购率的成本更低。当然&#xff0c;维护好客…
阅读更多...
使用matlab/C语言/verilog分别生成coe文件

使用matlab/C语言/verilog分别生成coe文件

之前已经写过一个如何使用matlab生成coe文件&#xff0c;matlab自行运算生成三角波、正弦波等数据&#xff0c;并保存为COE文件。可跳转下面的网址进行查阅。 使用matlab生成正弦波、三角波、方波的COE文件_三角波文件.coe-CSDN博客https://blog.csdn.net/yindq1220/article/d…
阅读更多...
C++ | Leetcode C++题解之第32题最长有效括号

C++ | Leetcode C++题解之第32题最长有效括号

题目&#xff1a; 题解&#xff1a; class Solution { public:int longestValidParentheses(string s) {int left 0, right 0, maxlength 0;for (int i 0; i < s.length(); i) {if (s[i] () {left;} else {right;}if (left right) {maxlength max(maxlength, 2 * ri…
阅读更多...
Python从0到100（十五）：函数的高级应用

Python从0到100（十五）：函数的高级应用

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…
阅读更多...
高通将支持 Meta Llama 3 在骁龙终端运行；特斯拉中国全系车型降价 1.4 万元丨 RTE 开发者日报 Vol.189

高通将支持 Meta Llama 3 在骁龙终端运行；特斯拉中国全系车型降价 1.4 万元丨 RTE 开发者日报 Vol.189

开发者朋友们大家好&#xff1a; 这里是「RTE 开发者日报」&#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有…
阅读更多...
第52篇：算法的硬件实现＜三＞

第52篇：算法的硬件实现＜三＞

Q&#xff1a;本期我们介绍二进制搜索算法电路&#xff0c;用于查找某个数据在数组中的位置。 A&#xff1a;基本原理&#xff1a;从数组的中间元素开始&#xff0c;如果给定值和中间元素的关键字相等&#xff0c;则查找成功&#xff1b;如果给定值大于或者小于中间元素的关键…
阅读更多...
Java本地缓存技术选型（Guava Cache、Caffeine、EhCache）

Java本地缓存技术选型（Guava Cache、Caffeine、EhCache）

前言 对一个java开发者而言&#xff0c;提到缓存&#xff0c;第一反应就是Redis。利用这类缓存足以解决大多数的性能问题了&#xff0c;我们也要知道&#xff0c;这种属于remote cache&#xff08;分布式缓存&#xff09;&#xff0c;应用的进程和缓存的进程通常分布在不同的服…
阅读更多...
JAVA学习笔记30（线程）

JAVA学习笔记30（线程）

1.线程 1.线程的概念 1.线程是由进程创建的&#xff0c;是进程的一个实体 2.一个进程可以拥有多个线程 2.并发 ​ *同一时刻&#xff0c;多个任务交替执行&#xff0c;造成一种"貌似同时"的错觉&#xff0c;单核cpu实现的多任务就是并发 3.并行 ​ *同一时刻&…
阅读更多...
私人密码管理储存库！Bitwarden 部署安装教程

私人密码管理储存库！Bitwarden 部署安装教程

日常生活中我们每个人都会拥有大量网站或社交平台帐号&#xff0c;时间久远了密码很容易忘记。因此&#xff0c;像 1Password 等密码管理 同步 一键登录的工具成为了很多人的首选。 然而 1Password 毕竟要付费&#xff0c;也有人会担心这类工具有隐私泄露的风险。其实&#…
阅读更多...
随着深度学习的兴起，浅层机器学习没有用武之地了吗？

随着深度学习的兴起，浅层机器学习没有用武之地了吗？

深度学习的兴起确实在许多领域取得了显著的成功&#xff0c;尤其是那些涉及大量数据和复杂模式的识别任务&#xff0c;如图像识别、语音识别和自然语言处理等。然而&#xff0c;这并不意味着浅层机器学习&#xff08;如支持向量机、决策树、朴素贝叶斯等&#xff09;已经失去了…
阅读更多...
Android集成Sentry实践

Android集成Sentry实践

需求&#xff1a;之前使用的是tencent的bugly做为崩溃和异常监控&#xff0c;好像是要开始收费了&#xff0c;计划使用开源免费的sentry进行替换。 步骤&#xff1a; 1.修改工程文件 app/build.gradle apply plugin: io.sentry.android.gradle sentry {// 禁用或启用ProGua…
阅读更多...
算法打卡day50|单调栈篇01| Leetcode 739. 每日温度、496.下一个更大元素 I

算法打卡day50|单调栈篇01| Leetcode 739. 每日温度、496.下一个更大元素 I

算法题 Leetcode 739. 每日温度 题目链接:739. 每日温度 大佬视频讲解&#xff1a;739. 每日温度视频讲解 个人思路 因为题目所求的是找到一个元素右边第一个比自己大的元素&#xff0c;这是单调栈的经典题目&#xff0c;用栈来记录遍历过的元素 解法 单调栈 单调栈的本质…
阅读更多...
opensshserver.config: line 3: Bad configuration option: GSSAPIKexAlgorithms

opensshserver.config: line 3: Bad configuration option: GSSAPIKexAlgorithms

报错记录 /etc/crypto-policies/back-ends/opensshserver.config: line 3: Bad configuration option: GSSAPIKexAlgorithms 百度尝试 找到 “GSSAPIKexAlgorithms”这一行&#xff0c;然后注释掉 #GSSAPIKexAlgorithms vim /etc/ssh/sshd_config 这种方式并没有解决 解决方…
阅读更多...
为什么中级职称评审不通过？有什么原因？

为什么中级职称评审不通过？有什么原因？

参与过职称评审或者有了解过职称评审的小伙伴们&#xff0c;应该都知道&#xff0c;职称评审都是有通过率&#xff0c;不是你去评&#xff0c;一定会评下来&#xff0c;一定会发证的&#xff0c;那么评审为什么不通过&#xff1f;有哪些原因呢&#xff1f; 现在职称评审人越来越…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023