问题

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图像组件不显示图像的问题相关推荐

  1. semantic ui html5,Semantic UI :安装 Semantic UI

    对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...

  2. Semantic UI术语

    Semantic UI 的特定术语 术语类型 一.组件类型 (Types of Components) 二.工程术语 (Project Terminology) 三.定义术语 (Definition ...

  3. 使用 OpenAI 创建 AI 驱动的 React 图像生成器应用程序

    欢迎来到 AI 驱动的应用程序世界!在这篇博文中,我们将探索使用 React 和强大的 OpenAI 平台创建图像生成器应用程序的激动人心的机会. 无论您是初学者还是经验丰富的开发人员,您都将学习如何 ...

  4. beeshell —— 开源的 React Native 组件库

    背景 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  5. semantic ui html5,css中什么是Semantic UI框架?

    什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...

  6. react测试组件_测试驱动的开发,功能和React组件

    react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...

  7. onclick=两个函数_[译]React函数组件和类组件的差异

    [译]React函数组件和类组件的差异 原文: https://overreacted.io/how-are-function-components-different-from-classes/ 在 ...

  8. [react] 展示组件和容器组件有什么区别?

    [react] 展示组件和容器组件有什么区别? 展示组件(Presentational Component) 关注页面的展示效果(外观) 内部可以包含展示组件和容器组件,通常会包含一些自己的DOM标记 ...

  9. 编写react组件_如何编写第一个React.js组件

    编写react组件 React的函数和类组件,道具,状态和事件处理程序 (React's function and class components, props, state, and event ...

最新文章

  1. 多个错误多个tryexcept的处理异常处理
  2. caffe中在某一层获得迭代次数的方法以及caffe编译时报错 error: ‘to_string‘ is not a member of ‘std‘解决方法
  3. new/delete与malloc/free的区别与联系详解
  4. Establishing SSL connection without server's identity verification is not recommended.
  5. oo第三次博客-JML规格
  6. 百万个小油馕跨越3000公里来支援!西安加油!
  7. 【省时查报告】2021四大行业品牌蓝V社媒内容运营观察报告:美妆护肤、食品饮料、汽车、家电.pdf(附下载链接)...
  8. 朋友圈发送照片泄露位置?微信:P 完再发!
  9. vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
  10. Ubuntu21.04 安装 VLC视频播放器
  11. python第二十天
  12. c语言字符串转16进制及16进制转字符串
  13. 【基于狂神Docker双响曲】:2、Docker进阶
  14. Windows下VS2015编译caffe(CPU ONLY)
  15. VS语音信号处理(2) C语言分段读取WAV语音文件语音数据
  16. ps 如何使用钢笔工具抠图
  17. 【快应用】account.authorize授权码模式登录报错1102
  18. Linux中分卷压缩和合并解压
  19. php.ini 关闭输出缓冲,php 输出缓冲 Output Control用法实例详解
  20. 【UNIX网络编程】| 【03】TCP客户/服务器程序示例

热门文章

  1. [转]数据可视化:基本图表
  2. 使用Spring MVC 4构建Restful服务
  3. linux+Oracle集群课程全面升级
  4. Oracle回应用户锁定,自治数据库是更好选择
  5. return2libc学习笔记
  6. Linux纯脚本故障转移集群
  7. linux学习:进程间通信—管道
  8. 美国任命首位首席信息安全官
  9. android升级gradle到3.4.1
  10. 练习:WinForm (PictureBox和Timer)