vue 遍历目录下的文件,获取图片名并直接遍历渲染

2023-11-11

使用场景:搭了个资源网站,想直接遍历显示当前图片目录下的所有图片,但是图片名字乱七八糟花里胡哨

举例说明获取目录下的文件名

新创建一个 vue 项目,获取 views 目录下的以.vue 结尾的文件的文件名

  mounted() {
  	//参数:1.路径;2.是否遍历子目录;3.正则表达式
    const files = require.context("@/views", true, /\.vue$/).keys();
    console.log(files);
  },

在这里插入图片描述
在这里插入图片描述

实践

随便找了几个图,放在了 assets 下的 img2 里,随便命名,如果要把图片显示出来的话,直接 v-for 循环渲染是不行的,如图
错误示例在这里插入图片描述
在这里插入图片描述
因此写的时候,需要使用 require 将路径引起来
在这里插入图片描述
或者直接在 js 里面处理好,再使用 v-for 渲染
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀

Written ❤️ sywdebug.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 遍历目录下的文件,获取图片名并直接遍历渲染 的相关文章

  • 如何在 ChartJS 中创建自定义图例

    我需要使用 ChartJS 库为我的圆环图创建自定义图例 我已经使用 ChartJS 提供的默认图例创建了甜甜圈 但我需要一些修改 我希望其价值高于汽车名称 另外 我不喜欢粘性图例 我想将其与甜甜圈分开 这样我就可以更改字体 框的样式 例如
  • workbox webpack 插件从预缓存清单中排除文件夹

    我正在将 workbox webpack 插件与 vue cli 3 一起使用 并且我想将文件夹中的文件排除在外 以免添加到预缓存清单中 请参阅下面我当前的文件结构 src 资产 CSS 壳文件1 svg文件2 svg文件3 svg svg
  • Vue 组件方法未在动态 HTML 中的事件上运行

    我正在尝试动态创建一些 HTML 内容并将 Vue 组件方法绑定到元素上的事件 然而这不起作用 下面是问题的描述和测试用例的片段 重现问题的步骤 Click 点我1 观察控制台 Click 切换工具提示的弹出框 Click 点我2 观察控制
  • 将 VueJs 组件添加到 Django 模板中

    我正在开发一个 Django 网站 我希望将一些 Vue 组件 散布 到 Django 渲染的模板中 我正在单个存储库中工作 并使用 webpack 设置来创建我在 Django 模板中使用的 style js 包 我正在努力让功能按照我想
  • 如何从 vue 组件调用 App.vue 中的方法

    我有一个 vue 组件和一个 vue 元素声明 如下所示 Vue component todo item template li This is a todo li methods test function I am getting an
  • 使用 Javascript 在前端创建基本 URL(开发、API 和生产)

    无论开发和部署如何 如何制作适用于 http https localhost 端口和实际域的基本 url 我想创建一个可以在所有场景或条件下工作的基本 url 无论 http https 协议 端口 本地主机和实际域如何 无论是在开发中还是
  • Vue 3 控制台中的 Proxy 是什么意思?

    我正在对数组进行洗牌 并在控制台中收到一条奇怪的消息 我的 JSON 文件如下所示 id 1 name Sushi image https images pexels com photos 1640777 pexels photo 1640
  • 在vue中提交表单。如何引用表单元素?

    我想从我的 Vue 页面通过一种方法进行经典的表单提交 我不想使用
  • Web 扩展中共享 vuex 状态(死对象问题)

    我正在尝试在网络扩展中使用共享的 vue js 状态 状态存储在后台脚本的 DOM 中并呈现在弹出页面中 第一次尝试 我的第一次尝试是使用一个没有 vuex 的简单商店 背景 js var store count 0 popup js br
  • VueJS - 访问已安装的存储数据

    我无法理解以下内容 我有一个store其中包含应用程序所需的变量 特别地 有一个globalCompanies哪些商店 globalCompanies current all currentName 在另一个组件中 我想执行以下操作 mou
  • npm run dev 和 npm run production 之间的区别

    我对 Laravel 和 vue js 很陌生 请让我知道它们之间有什么区别npm run dev and npm run production 这和环境有关系吗 npm run dev创建源映射并且不会缩小 js css 这使得调试和查找
  • Nuxt.js 多个资源的根路由和根级 slugs

    我正在使用 Nuxt 构建一个电子商务前端 我希望为尽可能多的资源提供根级 slugs 最重要的是目录路径和产品 URL 一个明显的方法是使用 Nuxt 文件结构进行路由创建 com category men Tshirt com cate
  • 未向导出的模块提供此上下文

    我对问题的提出感到不满意 受到鼓励提出改进建议 另外 请记住 由于无知 无知导致烦恼 我对问题的诊断可能有缺陷 对于那个很抱歉 In 这个答案 https stackoverflow com a 40893583 1525840建议使用th
  • Vuetify 自动完成类似项目未显示

    我的本地案例中有类似标题的自定义帖子API我尝试通过搜索查询显示帖子items array Data count 5 entries id 3 title Senior developer Python id 4 title Senior
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • FullCalendar-vue + Typescript:属性“getApi”不存在

    我尝试将 FullCalendar vue 与 Typescript 结合使用 但在访问其 API 时遇到错误 我的日历设置如下
  • 不知道如何预览我生成的 Nuxt3 应用程序

    我刚刚在静态模式下创建了一个 Nuxt3 但我不想每次都将其推送到 Netlify 进行预览 这是我的nuxt config js 没有改变 import defineNuxtConfig from nuxt export default
  • Vue js动态导入组件

    我有以下父组件 它必须呈现动态子组件列表
  • 在重复内容区域添加

    我有一个菜单组件 简单地说 它接受一个带有一系列选项的道具 并为每个选项在菜单中呈现一个项目 我希望能够根据用例自定义每个菜单项内的标记 因此我在菜单项元素内使用了占位符 你可以在这个中看到一个例子fiddle https jsfiddle
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不

随机推荐

  • 如何在 Ubuntu 18.04 上设置 OpenVPN 服务器

    本教程的先前版本由以下人员编写贾斯汀 埃林伍德 介绍 当您的智能手机或笔记本电脑连接到不受信任的网络 例如酒店或咖啡店的 WiFi 时 想要安全可靠地访问互联网吗 A虚拟专用网络 VPN 允许您安全地穿越不受信任的网络 就像在专用网络上一样
  • 保护服务器的推荐安全措施

    介绍 大多数时候 您的主要关注点是启动并运行云应用程序 作为设置和部署过程的一部分 在公开可用之前为您的系统和应用程序构建强大而彻底的安全措施非常重要 在部署应用程序之前实施本教程中的安全措施将确保您在基础架构上运行的任何软件都具有安全的基
  • Android TabLayout 和 ViewPager

    在本教程中 我们将在已经实现的 TabLayout 下实现 ViewPagerthis教程 Android TabLayout ViewPager 概述 ViewPagers 用于滑动数据页 它通常与片段结合使用 让我们修改之前教程中的布局
  • 如何在 Apache 上为 Ubuntu 12.04 创建 SSL 证书

    Status 已弃用 本文介绍不再受支持的 Ubuntu 版本 如果您当前运行的服务器运行 Ubuntu 12 04 我们强烈建议您升级或迁移到受支持的 Ubuntu 版本 升级到Ubuntu 14 04 从 Ubuntu 14 04 升级
  • SQL面试题及答案

    几乎所有面试都会问到SQL面试问题 因为数据库操作在应用中非常常见 SQL 代表结构化查询语言 它是一种用于数据库通信和关系数据库管理的特定领域编程语言 SQL 由用于数据库交互的标准命令组成 例如 SELECT INSERT CREATE
  • 了解 React useMemo Hook

    介绍 随着 React 16 8 的发布 您现在可以在 React 应用程序中使用许多有用的钩子 16 8 中引入的内置 Hooks 之一是useMemo 该挂钩有可能提高应用程序的性能 本文将探讨重新渲染在 React 中的工作原理 为什
  • 了解 SSH 加密和连接过程

    介绍 SSH或安全 shell 是一种安全协议 也是安全管理远程服务器的最常用方法 SSH 使用多种加密技术 提供了一种在两方之间建立加密安全连接 向另一方验证每一方以及来回传递命令和输出的机制 在本指南中 我们将研究 SSH 使用的底层加
  • 如何在 Ubuntu 14.04 上导入和导出 MongoDB 数据库

    MongoDB 是最流行的 NoSQL 数据库引擎之一 它以可扩展 功能强大 可靠且易于使用而闻名 在本文中 我们将向您展示如何导入和导出 MongoDB 数据库 我们应该明确指出 本文中的导入和导出是指以人类可读的格式处理数据 并与其他软
  • 如何使用 Java List 和 ListArray 的 remove() 方法

    介绍 Java列表remove 方法用于从列表中删除元素 ArrayList是最广泛使用的实现列表界面 所以这里的例子将使用ArrayList remove 方法 Java列表remove Methods 那里有两个remove 方法从列表
  • 在 SSH Unix 服务器上运行 Shell 命令的 Java JSch 示例

    今天我们将研究 JSch 示例教程 我们可以使用 JSch 在 java 中创建 SSH 连接 早些时候我写了一个程序来连接SSH服务器上的远程数据库 今天 我将介绍一个可用于连接到启用 SSH 的服务器并执行 shell 命令的程序 我在
  • R 中的 Paste() 函数 - 简要指南

    在R 中使用paste 函数将是直接且简单的 在本教程中 让我们看看如何使用paste 来连接字符串和值 paste 从多个向量中获取多个元素并将它们连接成一个元素 除了paste 函数之外 R还有另一个名为paste0 的函数 是的 你没
  • DigitalOcean 的技术写作指南

    DigitalOcean 很高兴能够继续构建与服务器管理和软件工程相关的技术文章集 为了确保 DigitalOcean 文章具有一致的质量和风格 我们制定了以下准则 本指南分为四个部分 Style 我们编写技术教程的高级方法 结构 对我们的
  • 如何使用 Vanilla JavaScript 和 HTML 创建拖放元素

    介绍 拖放是一种常见的用户交互 您可以在许多图形用户界面中找到它 有预先存在的 JavaScript 库可用于向您的应用程序添加拖放功能 但是 在某些情况下 库可能不可用 或者会引入项目不需要的开销或依赖项 在这些情况下 了解现代 Web
  • 如何在 Ubuntu 18.04 上安装 Apache Tomcat 9

    介绍 Apache Tomcat 是一个 Web 服务器和 servlet 容器 用于为 Java 应用程序提供服务 Tomcat 是 Java Servlet 和 JavaServer Pages 技术的开源实现 由 Apache Sof
  • 如何在 Apache Web 服务器中安装、配置和使用模块

    Status 已弃用 本文介绍不再受支持的 Ubuntu 版本 如果您当前运行的服务器运行 Ubuntu 12 04 我们强烈建议您升级或迁移到受支持的 Ubuntu 版本 升级到Ubuntu 14 04 从 Ubuntu 14 04 升级
  • 如何使用 Python 调试器

    介绍 在软件开发中 调试是查找并解决阻止软件正常运行的问题的过程 Python调试器为Python程序提供了调试环境 它支持设置条件断点 一次一行单步执行源代码 堆栈检查等 先决条件 您应该在计算机或服务器上安装 Python 3 并设置编
  • 如何在 Apache 上为 Debian 8 创建 SSL 证书

    介绍 本教程将引导您完成使用 SSL 证书保护的 Apache 服务器的设置和配置 在本教程结束时 您将拥有一个可通过 HTTPS 访问的服务器 SSL 基于将大整数解析为其同样大的质因数的数学难题 使用它 我们可以使用私钥 公钥对来加密信
  • 如何在 DigitalOcean 上使用 WordPress 一键安装

    介绍 WordPress是世界上最受欢迎的内容管理和博客平台之一 可让您高效地创建和管理网站内容 本教程将指导您使用以下命令设置 WordPress 网站WordPress 一键式应用程序 一键部署 除了常规 Ubuntu 20 04 Dr
  • localStorage和sessionStorage简介

    介绍 The localStorage and sessionStorage对象是 Web 存储 API 的一部分 是用于在本地保存键 值对的两个出色工具 使用localStorage and sessionStorage用于存储是使用 c
  • vue 遍历目录下的文件,获取图片名并直接遍历渲染

    使用场景 搭了个资源网站 想直接遍历显示当前图片目录下的所有图片 但是图片名字乱七八糟花里胡哨 举例说明获取目录下的文件名 新创建一个 vue 项目 获取 views 目录下的以 vue 结尾的文件的文件名 mounted 参数 1 路径