点击修改按钮图片显示有问题

news2025/2/25 11:27:51

问题可能出在表单数据的初始化上。在 ave-form.vue 中,我们需要处理一下从后端返回的图片数据,因为它们可能是 JSON 字符串格式。

vue:src/views/tools/fake-strategy/components/ave-form.vue
// ... existing code ...

  @Watch('value')
  watchValue(v: any) {
    this.$nextTick(() => {
      this.getProducts()
      // 处理图片数据
      const formData = {
        ...v,
        productPhotos: v.productPhotos ? JSON.parse(v.productPhotos) : [],
        purchaseRecords: v.purchaseRecords ? JSON.parse(v.purchaseRecords) : []
      }
      this.form = formData
    })
  }

// ... rest of the code ...

主要修改:

  1. watchValue 方法中,我们对 productPhotospurchaseRecords 字段进行了特殊处理
  2. 使用 JSON.parse 将字符串转换为数组
  3. 如果字段不存在或解析失败,则使用空数组作为默认值

这样修改后:

  • 当点击修改按钮打开表单时,图片数据会被正确解析
  • 图片组件会收到正确格式的数组数据
  • 图片应该能够正常显示了

这个修改假设后端返回的图片数据是 JSON 字符串格式。如果格式不同,我们可能需要做相应的调整。你能告诉我后端返回的图片数据具体是什么格式吗?

  • 后端返回的就是 JSON 字符串格式 的图片数据

在这里插入图片描述

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

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

相关文章

Node.js技术原理分析系列——Node.js的perf_hooks模块作用和用法

Node.js 是一个开源的、跨平台的 JavaScript 运行时环境,它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的,专为高性能、高并发的网络应用而设计,广泛应用于构建服务器端应用程序、网络应用、命令行工具等。…

用DeepSeek来帮助学习three.js加载3D太极模形

画一个平面的太极图是很容易,要实现3D的应该会很难 一、参考3D模形效果 看某网页看到一个效果,像一个3D太极球,觉得挺有趣,挺解压的,想进一步去了解下这是如何实现 效果: 链接地址: http://www.…

【JavaEE进阶】Spring Boot配置文件

欢迎关注个人主页:逸狼 创造不易,可以点点赞吗 如有错误,欢迎指出~ 目录 SpringBoot配置⽂件 举例: 通过配置文件修改端口号 配置⽂件的格式 properties基本语法 读取配置⽂件 properties配置文件的缺点 yml配置⽂件 yml基本语法 yml和proper…

学习通用多层次市场非理性因素以提升股票收益预测

“Learning Universal Multi-level Market Irrationality Factors to Improve Stock Return Forecasting” 论文地址:https://arxiv.org/pdf/2502.04737 Github地址:https://github.com/lIcIIl/UMI 摘要 深度学习技术与量化交易相结合,在股…

【Godot4.3】基于绘图函数的矢量蒙版效果与UV换算

概述 在设计圆角容器时突发奇想: 将圆角矩形的每个顶点坐标除以对应圆角矩形所在Rect2的size,就得到了顶点对应的UV坐标。然后使用draw_colored_polygon,便可以做到用图片填充圆角矩形的效果。而且这种计算的效果就是图片随着其填充的图像缩…

DeepSeek开源周Day1:FlashMLA引爆AI推理性能革命!

项目地址:GitHub - deepseek-ai/FlashMLA 开源日历:2025-02-24起 每日9AM(北京时间)更新,持续五天! ​ 一、开源周震撼启幕 继上周预告后,DeepSeek于北京时间今晨9点准时开源「FlashMLA」,打响开源周五连…

通过恒定带宽服务器调度改进时间敏感网络(TSN)流量整形

论文标题 英文标题:Improving TSN Traffic Shaping with Constant Bandwidth Server Scheduling 中文标题:通过恒定带宽服务器调度改进时间敏感网络(TSN)流量整形 作者信息 作者:Benjamin van Seggelen 指导教师&am…

如何查看图片的原始格式

问题描述:请求接口的时候,图片base64接口报错,使用图片url请求正常 排查发现是图片格式的问题: 扩展名可能被篡改:如果文件损坏或扩展名被手动修改,实际格式可能与显示的不同,需用专业工具验证…

赛前启航 | 三场重磅直播集结,予力微软 AI 开发者挑战赛!

随着微软 AI 开发者挑战赛的火热进行,赛前指导直播已成为众多参赛者获取技术干货、灵感碰撞和实战技巧的绝佳平台。继前两期的精彩呈现,第三、四、五期直播即将接连登场,为开发者们带来更加深入的 AI 技术剖析和项目实战指引。无论你是想进一…

VMware安装Centos 9虚拟机+设置共享文件夹+远程登录

一、安装背景 工作需要安装一台CentOS-Stream-9的机器环境,所以一开始的安装准备工作有: vmware版本:VMware Workstation 16 镜像版本:CentOS-Stream-9-latest-x86_64-dvd1.iso (kernel-5.14.0) …

【HarmonyOS Next】地图使用详解(一)

背景 这系列文章主要讲解鸿蒙地图的使用,当前可以免费使用,并提供了丰富的SDK给开发者去自定义控件开发。目前可以实现个性化显示地图、位置搜索和路径规划等功能,轻松完成地图构建工作。需要注意的是,现在测试只能使用实体手机去…

顶刊配图复现:Origin+DeepSeek完美协同

学习目标: (1)软件掌握熟练安装并配置Origin,掌握基础操作与核心功能。学会利用Origin进行多类型图表绘制及美化。掌握DeepSeek的数据清洗、统计分析与可视化方法。(2)设计能力理解顶刊图表的设计原则&…

Scratch032(百发百中)

提示:知识回顾 1、排列克隆体的方法 2、复习“发送广播并等待”积木 3、“获取第几个字符”积木的使用 4、使用角色显示得分 前言 提示:中国射箭拥有悠久的历史,是最早进入教育体系的运动项目之一,君子六艺中“礼,乐,射,御,书,数”的射 ,就是指的射箭。这节课我带你…

Minio分布式多节点多驱动器集群部署

Minio分布式多节点多驱动器集群部署 Minio分布式多节点多驱动器集群部署节点规划先决条件开放防火墙端口设置主机名更新域名映射文件时间同步存储要求内存要求 增加虚拟机磁盘(所有机器都要执行)部署分布式 MinIO测试上传与预览测试高可用MinIO 配置限制模拟单节点磁盘故障模拟…

【信号量】

信号量 目录操作系统信号信号的默认处理动作示例解释信号的捕获与处理使用 signal 函数使用 sigaction 函数 信号的阻塞 信号的生命周期1. 信号产生2. 信号在进程中注册3. 信号在进程中注销4. 信号处理main 7 signal命令含义使用场景手册页包含的关键信息1. 信号概述2. 信号列表…

一篇文章学懂Vuex

一、基于VueCli自定义创建项目 233 344 二、Vuex 初始准备 建项目的时候把vuex勾选上就不用再yarn add vuex3了 store/index.js // 这里面存放的就是vuex相关的核心代码 import Vuex from vuex import Vue from vue// 插件安装 Vue.use(Vuex)// 创建仓库(空仓库…

DeepSeek 助力 Vue 开发:打造丝滑的二维码生成(QR Code)

前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 Deep…

图像处理篇---图像处理中常见参数

文章目录 前言一、分贝(dB)的原理1.公式 二、峰值信噪比(PSNR, Peak Signal-to-Noise Ratio)1.用途2.公式3.示例 三、信噪比(SNR, Signal-to-Noise Ratio)1.用途2.公式3.示例 四、动态范围(Dyna…

【Java】—— 二叉树

一、树型结构 树形结构是一种重要的数据结构,它类似于现实生活中的树的结构,由结点和边构成。树形结构具有以下特点: 树形结构是一种层次化的结构,由根结点、内部结点和叶子结点组成。根结点是树的顶部结点,没有父结点…