当前位置: 首页 > news >正文

【Vue】】img使用 :src 动态绑定图片地址,但是加载图片不成功

问题复现:

img标签直接动态绑定图片的相对路径的时候,图片不能正常显示。代码如下所示

<view style="margin: 20rpx" v-for="(item, index) in showSampleImage" :key="index"><u-image :src="item.src" :width="item.width" :height="item.height"></u-image>
</view>
showSampleImage: [{src: "../sampleImage/1.jpg",width: "311",height: "148",},{src: "../sampleImage/2.jpg",width: "311",height: "148",},
]

但是如果把 src 里的地址写死就可以正常渲染,如下所示:

<view style="margin: 20rpx" v-for="(item, index) in showSampleImage" :key="index"><u-image :src="../sampleImage/1.jpg" :width="item.width" :height="item.height"></u-image>
</view>

原因:

动态地址,路径被加载器解析为字符串,所以图片找不到

解决方法:

设置绝对路径或者相对路径是改为用 require 引入才能成功,就可以动态使用了。

showSampleImage: [{src: require("../sampleImage/1.jpg"),width: "311",height: "148",},{src: require("../sampleImage/1.jpg"),width: "311",height: "148",},
],

相关文章:

【Vue】】img使用 :src 动态绑定图片地址,但是加载图片不成功

问题复现&#xff1a; img标签直接动态绑定图片的相对路径的时候&#xff0c;图片不能正常显示。代码如下所示 <view style"margin: 20rpx" v-for"(item, index) in showSampleImage" :key"index"><u-image :src"item.src"…...

list模拟

之前模拟了string,vector&#xff0c;再到现在的list&#xff0c;list的迭代器封装最让我影响深刻。本次模拟的list是双向带头节点的循环链表&#xff0c;该结构虽然看起来比较复杂&#xff0c;但是却非常有利于我们做删除节点的操作&#xff0c;结构图如下。 由于其节点结构特…...

python字典:怎么取出key对应的值

目录 python中的字典是什么 怎么判断key是否在字典中 怎么取出key对应的值 总结 python中的字典是什么 在Python中&#xff0c;字典&#xff08;Dictionary&#xff09;是一种无序且可变的数据类型&#xff0c;用于存储键-值&#xff08;Key-Value&#xff09;对。字典通过…...

okvis

论文 Keyframe-Based Visual-Inertial SLAM Using Nonlinear Optimization 摘要 由于两种感知模式的互补性&#xff0c;视觉和惯性线索的融合在机器人中变得很流行。虽然迄今为止大多数融合策略都依赖于过滤方案&#xff0c;但视觉机器人界最近转向了非线性优化方法&#x…...

fabric js双击弹出菜单, 双击弹出输入框 修改文字 群组对象

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>测试1</title><style type"text/css">body {background-color: #ccc;float: left;}#main {background-color: #fff;border: 1px…...

路由器工作原理

路由器原理 路由概述 路由&#xff1a;跨越从源主机到目标主机的一个互联网络来转发数据包的过程。&#xff08;为数据包选择路径的过程&#xff09; 作用&#xff1a;路由器是连接不同网段的。 转发依据&#xff1a; 路由表&#xff1a;路径选择全看路由表&#xff0c;根…...

在centos 7系统docker上构建mysql 5.7

一、VM上已经安装centos 7.9&#xff0c;且已完成docker的构建 二、安装mysql5.7 安装镜像&#xff1a;[rootlocalhost lll]# docker pull mysql:5.7 查看镜像[rootlocalhost lll]# docker images 根据镜像id构建mysql容器&#xff0c;且分配端口号[rootlocalhost lll]# dock…...

数据库的介绍和分类

目录 一、数据库的介绍和分类 二、命令行客户端 三、数据操作 四、查询的基本操作 五、条件查询 六、分组和聚合 资料获取方法 一、数据库的介绍和分类 数据库&#xff1a;长期存储在计算机内、有组织的数据集合 数据库的分类&#xff1a; 关系型数据库 以表格的形式…...

职责链模式——请求的链式处理

1、简介 1.1、概述 很多情况下&#xff0c;在一个软件系统中可以处理某个请求的对象不止一个。例如SCM系统中的采购单审批&#xff0c;主任、副董事长、董事长和董事会都可以处理采购单&#xff0c;他们可以构成一条处理采购单的链式结构。采购单沿着这条链进行传递&#xff…...

docker中涉及的挂载点总结

文章目录 1.场景描述2. 容器信息在主机上位置3. 通过docker run 命令4、通过Dockerfile创建挂载点5、容器共享卷&#xff08;挂载点&#xff09;6、最佳实践&#xff1a;数据容器 1.场景描述 在介绍VOLUME指令之前&#xff0c;我们来看下如下场景需求&#xff1a; 1&#xff…...

elasticsearch 官方优化建议

.一般建议 a.不要返回过大的结果集。这个建议对一般数据库都是适用的&#xff0c;如果要获取大量结果&#xff0c;可以使用search_after api&#xff0c;或者scroll &#xff08;新版本中已经不推荐&#xff09;。 b.避免大的文档。 2. 如何提高索引速度 a.使用批量请求。为了…...

Kubernetes(K8s)从入门到精通系列之五:K8s的基本概念和术语之应用类

Kubernetes K8s从入门到精通系列之五:K8s的基本概念和术语之应用类 一、Service与Pod二、Label与标签选择器三、Pod与Deployment四、Service的ClusterIP地址五、Service的外网访问问题六、有状态的应用集群七、批处理应用八、应用配置问题九、应用的运维一、Service与Pod Ser…...

DevOps(四)

CD(二) 1. CDStep 1 - 上传代码Step 2 - 下载代码Step 3 - 检查代码Step 4 - 编译代码Step 5 - 上传仓库Step 6 - 下载软件Step 7 - 制作镜像Step 8 - 上传镜像Step 9 - 部署服务2. 整体预览2.1 预览1. 修改代码2. 查看sonarqube检查结果3. 查看nexus仓库4. 查看harbor仓库5.…...

Element-plus侧边栏踩坑

问题描述 el-menu直接嵌套el-menu-item菜单&#xff0c;折叠时不会出现文字显示和小箭头无法隐藏的问题&#xff0c;但是实际开发需求中难免需要把el-menu-item封装为组件 解决 vue3项目中嵌套两层template <template><template v-for"item in list" :k…...

支持多种通信方式和协议方便接入第三方服务器或云平台

2路RS485串口是一种常用的通信接口&#xff0c;可以支持Modbus Slave协议&#xff0c;并可接入SCADA、HMI、DSC、PLC等上位机。它还支持Modbus RTU Master协议&#xff0c;可用于扩展多达48个Modbus Slave设备&#xff0c;如Modbus RTU远程数据采集模块、电表、水表、柴油发电机…...

使用 OpenCV 进行图像模糊度检测(拉普拉斯方差方法)

写在前面 工作中遇到&#xff0c;简单整理人脸识别中&#xff0c;对于模糊程度较高的图像数据&#xff0c;识别率低&#xff0c;错误率高。虽然使用 AdaFace 模型&#xff0c;对低质量人脸表现尤为突出。但是还是需要对 模糊程度高的图像进行丢弃处理当前通过阈值分类&#xff…...

神经网络简单介绍

人工神经网络(artififial neural network) 简称神经网络&#xff0c;它是一种模仿生物神经网络结构和功能的非线性数学模型。 神经网络通过输入层接受原始特征信息&#xff0c;再通过隐藏层进行特征信息的加工和提取&#xff0c;最后通过输出层输出结果。 根据需要神经网络可以…...

16位S912ZVML32F3MKH、S912ZVML31F1WKF、S912ZVML31F1MKH混合信号MCU,适用于汽车和工业电机控制应用。

S12 MagniV微控制器是易于使用且高度集成的混合信号MCU&#xff0c;非常适合用于汽车和工业应用。S12 MagniV MCU提供单芯片解决方案&#xff0c;是基于成熟的S12技术的完整系统级封装 (SiP) 解决方案&#xff0c;在整个产品组合内软件和工具都兼容。 S12 MagniV系统级封装 (S…...

力扣 509. 斐波那契数

题目来源&#xff1a;https://leetcode.cn/problems/fibonacci-number/description/ C题解1&#xff1a;根据题意&#xff0c;直接用递归函数。 class Solution { public:int fib(int n) {if(n 0) return 0;else if(n 1) return 1;else return(fib(n-1) fib(n-2));} }; C题…...

使用 DolphinDB TopN 函数探索高效的Alpha因子

DolphinDB 已经有非常多的窗口计算函数&#xff0c;例如 m 系列的滑动窗口计算&#xff0c;cum 系列累计窗口计算&#xff0c;tm 系列的的时间窗口滑动计算。但是所有这类函数都是对窗口内的所有记录进行指标计算&#xff0c;难免包含很多噪音。 DolphinDB 的金融领域用户反馈…...

自动化伦理探讨:OpenClaw百川2-13B-4bits在个人数据处理的权限边界

自动化伦理探讨&#xff1a;OpenClaw百川2-13B-4bits在个人数据处理的权限边界 1. 当AI开始操控我的电脑 第一次看到OpenClaw在我的MacBook上自动整理桌面文件时&#xff0c;那种震撼感至今难忘。这个开源的AI智能体框架正在我的终端里移动鼠标光标&#xff0c;将散落的PDF按…...

从DTC诊断码到ECU恢复:深入解析车载CAN总线的BUSOFF快慢恢复机制

从DTC诊断码到ECU恢复&#xff1a;车载CAN总线BUSOFF快慢恢复机制实战指南 当CAN总线上的某个ECU因连续发送失败而触发BUSOFF状态时&#xff0c;整个车载网络的稳定性便面临严峻考验。作为汽车电子诊断工程师&#xff0c;我们常常需要在深夜的生产线上&#xff0c;面对闪烁的故…...

SQLiteGo:国产 ARM (aarch64) 银河麒麟 SQLite 数据库管理和数据分析工具分享

SourceURL:file:///home/Quincy/桌面/国产ARM环境 SQLite 管理实践&#xff1a;SQLiteGo 工具适配与数据分析优势分享.docx 在银河麒麟&#xff08;aarch64架构&#xff09;等国产ARM环境下&#xff0c;无论是开发者的日常数据库运维&#xff0c;还是数据分析师的高频数据处理…...

避坑指南:使用OverPy API获取OSM路网数据时常见的5个错误及解决方法

OverPy API实战避坑指南&#xff1a;5个高频错误与专业解决方案 当开发者第一次接触OverPy API与OpenStreetMap数据时&#xff0c;往往会陷入一些看似简单却影响深远的陷阱。我曾在一个城市交通分析项目中连续三天被边界框坐标顺序问题困扰&#xff0c;直到发现查询结果中道路片…...

SmallThinker-3B-Preview惊艳效果:将模糊产品需求转化为PRD+技术方案+风险提示

SmallThinker-3B-Preview惊艳效果&#xff1a;将模糊产品需求转化为PRD技术方案风险提示 你有没有遇到过这样的情况&#xff1f;产品经理或者老板给你一个模糊的想法&#xff0c;比如“我们做个智能助手吧”&#xff0c;或者“开发一个能自动生成周报的工具”。你听完后一头雾…...

OpenClaw技能扩展:基于GLM-4.7-Flash实现Markdown自动整理

OpenClaw技能扩展&#xff1a;基于GLM-4.7-Flash实现Markdown自动整理 1. 为什么需要自动化文档管理 作为一个长期使用Markdown记录技术笔记的开发者&#xff0c;我的文档库已经积累了超过2000个文件。每当需要查找某个知识点时&#xff0c;总要在混乱的文件夹结构和随意命名…...

共源级PMOS反向串联电路在电源管理中的双向导通机制解析

1. 共源级PMOS反向串联电路的基本结构 先来看一个生活中常见的场景&#xff1a;你家的防盗门通常需要两把钥匙才能打开&#xff0c;一把从外面开&#xff0c;一把从里面开。共源级PMOS反向串联电路的工作原理就有点像这个双钥匙系统——它通过两个背靠背连接的PMOS管&#xff0…...

eMMC5.1协议详解:从CMD0到CSD寄存器,手把手教你读懂关键命令

eMMC5.1协议深度解析&#xff1a;关键命令与寄存器实战指南 在嵌入式存储领域&#xff0c;eMMC5.1协议作为主流存储解决方案的核心规范&#xff0c;其命令集与寄存器操作直接决定了设备性能与稳定性。本文将聚焦协议中最关键的CMD命令序列与CSD寄存器结构&#xff0c;通过实际示…...

从固定到自适应:手把手教你改进Savitzky-Golay滤波器,告别边界效应和参数调优烦恼

从固定到自适应&#xff1a;手把手教你改进Savitzky-Golay滤波器&#xff0c;告别边界效应和参数调优烦恼 信号处理领域的从业者常常面临一个两难选择&#xff1a;如何在去除噪声的同时&#xff0c;尽可能保留信号的关键特征&#xff1f;传统Savitzky-Golay滤波器虽然在一定程度…...

用Matlab+Yalmip+Gurobi搞定微电网优化配置:从电工杯A题到实战避坑指南

MatlabYalmipGurobi微电网优化实战&#xff1a;从建模到竞赛应用的完整指南 微电网优化配置是能源系统研究中的经典问题&#xff0c;也是数学建模竞赛中的高频考点。去年电工杯A题就曾让参赛者头疼——如何在满足负荷需求的前提下&#xff0c;合理配置风光储系统&#xff0c;实…...