ant组件用到本地图片需要加require

最新推荐文章于 2024-08-23 18:02:07 发布

phoebe_l_

最新推荐文章于 2024-08-23 18:02:07 发布

阅读量601

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_58614993/article/details/130005097

版权

遇到使用组件是只支持网络链接不支持本地图片时，可以试试require

<a-empty
            :image="require('@/assets/empty/缺省图-空状态2.svg')"
            v-if="$fp.isEmpty(tableData)"
            style="padding-top: 5px"
          />

<a-avatar
          :src="require('@/assets/image/avatar.png')"
          style="margin-right: 8px; margin-bottom: 4px; cursor: pointer"
        />

以上src=“ ”变为：src=“require（‘’）”

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

phoebe_l_

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

如何将Ant Design Icon本地化

红莲开梦里

05-17

5796

本文主要解决：在内网/离网环境使用React+Ant Design进行项目开发时，Icon显示异常问题；离线使用IconFont步骤：1、在 ( iconfont.cn ) 上把Ant图标下载到本地。（下载方式参考：https://blog.youkuaiyun.com/guoyangyang123456/article/details/70314210）2、把下载的Iconfont放到以...

引入本地图片报错：require is not defined

虎康的博客

02-28

1228

Vue3 + Vite 使用本地图片报错：require is not defined。刚开始我是这样写的，数据是这样定义的，但是数据没出来，

参与评论您还未登录，请先登录后发表或查看评论

React项目Antd 引入图片

m0_51105610的博客

12-10

2460

1.创建文件image>logo.png(图片名) 2.引入图片 import logo from '../Image/logo.png' //图片路径 return（ <div> <img src={logo} alt="" width='400' height='400'/> <div> ） 3.效果图

vant-image本地图片无法显示

01-07

坑：正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图：加载失败解决办法： src属性绑定requeir（）方法 :src=require('../assets/logo.png') 完美解决：加载失败 //script(vue) data() { return { //图片资源 imgList: [ require(“../assets/icon_emeetnote_nor.png”),

React+Ant Design: 使用＜Image＞无法显示图片

Danica的博客

06-23

2362

问题:src属性无法之间读取相对路径

Ant Design(React常用UI组件库)的按需引入及自定义主题配置

m0_53858079的博客

11-06

1003

下面拓展一下Ant Design(UI组件库)的一下高级配置pa~~ 链接参考：https://3x.ant.design/docs/react/use-with-create-react-app-cn 在create-react-app脚手架使用中，我们经常会全局引入一个组件库的样式安装和初始化一个项目 yarn create react-app antd-demo 自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm re

【前端测试新策略】：确保Ant Design 4.1.5组件的可靠性

[【前端测试新策略】：确保Ant Design 4.1.5组件的可靠性](https://opengraph.githubassets.com/6004e023074ee4c1531596a091678835f6e8a5227b8eaf6355f2815468d9e053/ant-design/ant-design/issues/45379) ...

ant design pro模板_Ant Design Pro 学习笔记

weixin_30590161的博客

01-26

996

学习笔记摘要介绍Ant Design Pro 是一个基于Ant Design搭建起来的模板项目。它提供了两个主要布局：BasicLayout、UserLayout，在布局基础上制作了20多个基础页面，详情见模板介绍段落。Ant Design Pro 主体代码使用ES2015+语法规则，因此在阅读源码时遇到不理解的语法，可前往相关主页进行查询。在学习笔记中，除非遇到关键的语法点，否则不对语法进行额外...

企业级前端组件建设

09-07

1124

去年我们平台为客户提供了一套企业级前端组件方案，收集了一下客户的需求，同时也做了一部分调研工作，由于我们是为金融机构服务的，所以也发现了同业中广发所做的GFDesign也是这样的思路，大家可以看广发移动端统一组件库GFDesign来了这篇文章，同时像蚂蚁的Ant Design、字节的和以及腾讯的TDesign，都是类似的企业级设计系统以及组件库。那么提到了组件库不得不说一下组件化。组件化是一种非常优雅的提效率、保质量的解决方案，可以帮助研发人员实现功能复用，降低代码重复率，提高研发效率。

React + Node.js 前后端实现图片上传功能

chenyajundd的博客

01-11

1317

最近笔者在开发个人博客的后台管理系统，里面用到了图片上传相关的功能，在这里记录并分享一下，希望可以帮到大家，话不多说直接开始吧！（想看代码的可以直接跳到最后哦~）

antd-img-crop:Ant用于Ant Design上传的图像裁剪器

04-28

antd-img-crop 用于Ant设计的图像裁剪器。 English | 演示版安装 yarn add antd-img-crop 用法 import ImgCrop from 'antd-img-crop' ; import { Upload } from 'antd' ; const Demo = ( ) => ( < ImgCrop> < Upload> + Add image < / Upload > < / ImgCrop > ) ; 道具 Struts 类型默认描述方面 number 1 / 1 作物面积纵横比， width / height 形状 string 'rect' 作物区域的形状， 'rect'或'round' 网格 boolean false 显示作物面积的网格（第三行）质量 number 0.4 图像质

image::framed_picture:React Image组件

03-18

rc图像 React图像。特征占位符预览旋转飞涨倒退多重预览安装用法 npm install npm start const Image = require ( 'rc-image' ) ; ReactDOM . render ( < Image xss=removed> ) , document . getElementById ( 'root' ) ) ; 原料药姓名类型默认描述预览布尔| {visible：boolean，onVisibleChange：function（value，prevValue），getContainer：string | HTMLElement | （（）=> HTMLEl

使用Avator加载本地头像失败

WORLDI的博客

06-01

1575

今天在做项目的时候遇到了一个问题，使用ant-design中的<Advator/>加载头像时报错： GET http://localhost:3000/public/image/wordli.jpg 404 (Not Found) 后来发现<Advator src="" />中的src里只能读取网上的地址，读取不到本地地址的图片,把本地地址改为网络上的地址就好了。可以把图片上传到服务器；没有的话可以把图片上传到qq空间相册，再使用qq空间里的地址（可能会很长）。 ...

vue动态绑定本地图片需要用require包裹

m0_67841039的博客

08-02

859

vue内的JS在引用本地图片时，静态可以直接加载，但是给src动态绑定属性之后，图片加载不出来，原因如下: 1.不用require，:src="'../img/image.jpg'" 会被解析为字符串，图片加载不出来 <img src="../img/image.jpg"> // 正常加载 <img :src="'../img/image.jpg'"> // 动态地址，路径被加载器解析为字符串，图片找不到 2.使用require包裹之后，变成动态地址，正常加载 src

【antd】图片预览组件

最新发布

03-15

### 使用 Ant Design 实现本地文件夹浏览功能 Ant Design 是一个广泛使用的 React UI 库，提供了丰富的组件来构建现代化的应用程序界面。然而需要注意的是，默认情况下浏览器的安全策略不允许前端 JavaScript 脚本直接访问用户的本地文件系统。因此要实现真正的本地文件夹浏览功能，通常需要借助一些额外的技术手段。以下是几种可能的方式： #### 方法一：通过 HTML 的 `<input type="file">` 组件 HTML 提供了一个内置的文件选择器，可以通过设置 `directory` 和 `webkitdirectory` 属性允许用户选择整个目录而不是单个文件。虽然这不是完全由 Ant Design 驱动的功能，但它可以很好地集成到 Ant Design 的表单或其他组件中。 ```jsx import React, { useState } from 'react'; import { Button, message } from 'antd'; const FolderPicker = () => { const [selectedFiles, setSelectedFiles] = useState([]); const handleFolderSelect = (event) => { const files = Array.from(event.target.files); setSelectedFiles(files); if (files.length === 0) { message.info('No folder selected.'); } }; return ( <> <Button> Select Folder <input style={{ display: 'none' }} type="file" webkitdirectory={true} directory={true} onChange={handleFolderSelect} /> </Button> {selectedFiles.length > 0 && ( <ul> {selectedFiles.map((file, index) => ( <li key={index}>{file.webkitRelativePath}</li> ))} </ul> )} </> ); }; export default FolderPicker; ``` 这种方法利用了原生的文件输入控件，并将其隐藏起来以便于自定义样式[^1]。 #### 方法二：使用 Electron 或其他桌面应用框架如果目标平台是一个桌面应用程序，则可以选择像 **Electron** 这样的技术栈，在其中可以直接调用 Node.js API 访问文件系统。在这种场景下，可以结合 Ant Design 构建更复杂的交互逻辑。下面是一个简单的例子，展示了如何在 Electron 中打开对话框并获取选定路径： ```javascript // 主进程代码片段 const { dialog } = require('electron'); function openDirectoryDialog() { dialog.showOpenDialog({ properties: ['openDirectory'] }).then(result => { console.log(result.filePaths); // 打印所选目录路径 }); } module.exports = { openDirectoryDialog }; ``` 而在渲染进程中触发该方法时，可配合 Ant Design 的按钮完成操作： ```jsx import React from 'react'; import { Button } from 'antd'; window.electronAPI.openDirectoryDialog(); // 假设已建立 IPC 通信桥接 const DirectoryBrowser = () => { const browseDirectories = async () => { await window.electronAPI.openDirectoryDialog(); }; return <Button onClick={browseDirectories}>Browse Directories</Button>; }; export default DirectoryBrowser; ``` 此方式适用于开发跨平台桌面软件的情况[^2]。 #### 方法三：基于 Web 技术扩展权限（如 Chrome 插件）对于某些特定环境下的项目需求来说，例如制作 Google Chrome 浏览器插件，也可以申请更高的权限去读取用户的计算机资源。这同样需要用到官方文档里提到的相关配置项以及接口调用流程[^4]。不过值得注意的一点在于，即便如此也仅限于那些明确授予同意后的区域范围之内执行动作而已——绝不可能越界侵犯隐私！ --- ###