semantic-ui-react图像组件不显示图像的问题
问题
React提供了一种相当科学的开发Web应用前端视图层的技术,借助于semantic-ui for React可以很容易地搭建起常用网页开发中的UI组件,但是最近在分析其提供的各种组件时发现Image组件存在一个小问题,记录于此。
我最初代码形式
import React from 'react'
import {Grid,Image,
} from 'semantic-ui-react'const ImageExampleLink = () => (<Grid container stackable verticalAlign='middle'><Grid.Row><Grid.Column floated='left' width={4}><Imageborderedroundedsize='small'src='./help.png'/></Grid.Column><Grid.Column floated='right' width={4}><Imageborderedroundedsize='small'src='./help.png'/></Grid.Column></Grid.Row><Grid.Row><Grid.Column floated='right' ><Imagesize='mini'avatarsrc='./help.png'/></Grid.Column></Grid.Row></Grid>
)export default ImageExampleLink
其中图像文件的路径位置没有问题,但是运行中发现图像死活不显示,只显示一个通用的系统提供的那种你常见的占位符形式。
然后,通过google浏览器搜索分析,发现了一个看似相近的题目「Semantic-UI Image properties not working with semantic-ui-react」(https://stackoverflow.com/questions/44609711/semantic-ui-image-properties-not-working-with-semantic-ui-react)。
其实,上面的问题与我的不一样,semantic-ui-react系统所使用的css文件我是的确导入了。我的有关安装及使用方式是这样的:
npm install semantic-ui-react --save
npm install semantic-ui-css
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
然后在index.js里导入
import 'semantic-ui-css/semantic.min.css';
上述步骤没有什么问题,因为我使用其他许多组件(我是在app.js中进行测试使用各种组件的)是没有问题的。
在上面的stackoverflow.com问题中,那位回答者的回答是“Semantic UI React requires a Semantic UI' CSS, you forgot to setup it, here is instuctions.”。我跟踪这个链接过去,只是简单地转入了官方展示网站,没有什么,我早就比较熟悉这个地方了。但是,受到此处的一点启动,我把代码中的src属性的地址形式变换了一个,使用了JSX语言推荐的如下表达形式。
改进后代码形式
import React from 'react'
import {Grid,Image,
} from 'semantic-ui-react'
import help from './help.png';const ImageExampleLink = () => (<Grid container stackable verticalAlign='middle'><Grid.Row><Grid.Column floated='left' width={4}><Imageborderedroundedsize='small'src={help}/></Grid.Column><Grid.Column floated='right' width={4}><Imageborderedroundedsize='small'src={help}/></Grid.Column></Grid.Row><Grid.Row><Grid.Column floated='right' ><Imagesize='mini'avatarsrc={help}/></Grid.Column></Grid.Row></Grid>
)export default ImageExampleLink
请注意上面代码最初的import语句和改进后的Image组件的src属性值的表达方式。再试运行,OK!
有关这种原因的深层官方解决仍然在探索中,有此问题的,可暂时参考一下。
semantic-ui-react图像组件不显示图像的问题相关推荐
- semantic ui html5,Semantic UI :安装 Semantic UI
对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...
- Semantic UI术语
Semantic UI 的特定术语 术语类型 一.组件类型 (Types of Components) 二.工程术语 (Project Terminology) 三.定义术语 (Definition ...
- 使用 OpenAI 创建 AI 驱动的 React 图像生成器应用程序
欢迎来到 AI 驱动的应用程序世界!在这篇博文中,我们将探索使用 React 和强大的 OpenAI 平台创建图像生成器应用程序的激动人心的机会. 无论您是初学者还是经验丰富的开发人员,您都将学习如何 ...
- beeshell —— 开源的 React Native 组件库
背景 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- semantic ui html5,css中什么是Semantic UI框架?
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
- react测试组件_测试驱动的开发,功能和React组件
react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...
- onclick=两个函数_[译]React函数组件和类组件的差异
[译]React函数组件和类组件的差异 原文: https://overreacted.io/how-are-function-components-different-from-classes/ 在 ...
- [react] 展示组件和容器组件有什么区别?
[react] 展示组件和容器组件有什么区别? 展示组件(Presentational Component) 关注页面的展示效果(外观) 内部可以包含展示组件和容器组件,通常会包含一些自己的DOM标记 ...
- 编写react组件_如何编写第一个React.js组件
编写react组件 React的函数和类组件,道具,状态和事件处理程序 (React's function and class components, props, state, and event ...
最新文章
- 多个错误多个tryexcept的处理异常处理
- caffe中在某一层获得迭代次数的方法以及caffe编译时报错 error: ‘to_string‘ is not a member of ‘std‘解决方法
- new/delete与malloc/free的区别与联系详解
- Establishing SSL connection without server's identity verification is not recommended.
- oo第三次博客-JML规格
- 百万个小油馕跨越3000公里来支援!西安加油!
- 【省时查报告】2021四大行业品牌蓝V社媒内容运营观察报告:美妆护肤、食品饮料、汽车、家电.pdf(附下载链接)...
- 朋友圈发送照片泄露位置?微信:P 完再发!
- vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
- Ubuntu21.04 安装 VLC视频播放器
- python第二十天
- c语言字符串转16进制及16进制转字符串
- 【基于狂神Docker双响曲】:2、Docker进阶
- Windows下VS2015编译caffe(CPU ONLY)
- VS语音信号处理(2) C语言分段读取WAV语音文件语音数据
- ps 如何使用钢笔工具抠图
- 【快应用】account.authorize授权码模式登录报错1102
- Linux中分卷压缩和合并解压
- php.ini 关闭输出缓冲,php 输出缓冲 Output Control用法实例详解
- 【UNIX网络编程】| 【03】TCP客户/服务器程序示例