栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

semantic-ui-react图像组件不显示图像的问题

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

semantic-ui-react图像组件不显示图像的问题

问题

React提供了一种相当科学的开发Web应用前端视图层的技术,借助于semantic-ui for React可以很容易地搭建起常用网页开发中的UI组件,但是最近在分析其提供的各种组件时发现Image组件存在一个小问题,记录于此。

我最初代码形式
import React from 'react'import {    Grid,    Image,} from 'semantic-ui-react'const ImageExamplelink = () => (                                                                                                                                                                )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 = () => (                                                                                                                                                                )export default ImageExamplelink

请注意上面代码最初的import语句和改进后的Image组件的src属性值的表达方式。再试运行,OK!

有关这种原因的深层官方解决仍然在探索中,有此问题的,可暂时参考一下。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/246929.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号