Vue解决img路径报错

问题:

我们有一组图片的地址,使用v-for遍历img标签,设置src属性,却无法获取图片

 

解决方法:

因为我们将图片路径放入data中后会被webpack进行打包,这时候的路径仅仅只是一个字符串,无法进行解析。

我们使用require获取图片路径,再渲染到页面中就解决了这个问题。

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

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

相关文章

使用vue3+vite+elctron构建小项目介绍Electron进程间通信

进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责,因此 IPC 是执行许多常见任务的唯一方法,例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。 在 …

innovus: set_ccopt_property的基本用法

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 clock route clock route的net type分为三种,分别是root、trunk和leaf,其中root是指fanout超过routing_top_fanout_count约束的net,leaf是指…

ByteBuffer的原理和使用详解

ByteBuffer是字节缓冲区,主要用户读取和缓存字节数据,多用于网络编程,原生的类,存在不好用,Netty采用自己的ByteBuff,对其进行了改进 1.ByteBuffer的2种创建方式 1.ByteBuffer buf ByteBuffer.allocate(i…

竞赛 深度学习手势识别 - yolo python opencv cnn 机器视觉

文章目录 0 前言1 课题背景2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存 5 模型训练5.1 修…

206.反转链表

206.反转链表 力扣题目链接(opens new window) 题意:反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 双双指针法: 创建三个节点 pre(反转时的第一个节点)、cur(当前指向需要反转的节点…

GB28181协议如何注册

前言 GB28181协议是视频监控领域的国家标准,本文将解析如何在FFmpeg中增加对GB28181协议的支持,使其可以与支持GB28181协议的设备进行通信与控制,实现设备的注册、保活以及流媒体的传输。 1.背景介绍 GB28181协议指的是国家标准GB/T 28181…

一文带你了解自动化测试是什么?

本章主要讲解自动化测试的含义、分类、项目使用,以及自动化测试工具的优势。 一、自动化测试概述 1、什么是自动化测试? 自动化测试是软件测试活动中的一个重要分支和组成部分。随着软件产业的不断发展,市场对软件周期的要求越来越高&…

Java日志组件介绍之二

一、前言 Java日志组件介绍之一 主要介绍了JDK内置日志和Apache的common-logging通用日志接口,今天这篇我们继续了解Java其它一些日志组件。 二、slf4j slf4j即Simple Logging Facade for JAVA ,简单日志门面,类似common-logging&#xff0…

基于ASP.NET MVC + Bootstrap的仓库管理系统

基于ASP.NET MVC Bootstrap的仓库管理系统。源码亲测可用,含有简单的说明文档。 适合单仓库,基本的仓库入库管理,出库管理,盘点,报损,移库,库位等管理,有着可视化图表。 系统采用Bo…

Kubernetes - Ingress HTTP 升级 HTTPS 配置解决方案(新版本v1.21+)

之前我们讲解过 Kubernetes - Ingress HTTP 搭建解决方案,并分别提供了旧版本和新版本。如果连 HTTP 都没搞明白的可以先去过一下这两篇 Kubernetes - Ingress HTTP 负载搭建部署解决方案_放羊的牧码的博客-CSDN博客Kubernetes - Ingress HTTP 负载搭建部署解决方案…

17.基干模型Swin-Transformer解读

文章目录 SWin-Transformer解读1.基础介绍关于Shifted Window based Self-Attention相对位置偏置网络整体结构和层级特征欢迎访问个人网络日志🌹🌹知行空间🌹🌹 SWin-Transformer解读 1.基础介绍 Swin-Transformer是2021年03月微软亚洲研究院提交的论文中提出的,比V…

八段流水线运行示意图

流水线如下图所示: 存储周期存取时间恢复时间, 即存取完数据后需要一定量的时间来恢复, 而低位交叉编址的流水线所利用的正是恢复时间 流水线与非流水线对比如下: 经典例题: 2013年408真题