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}> <Image bordered rounded size='small' src='./help.png' /> </Grid.Column> <Grid.Column floated='right' width={4}> <Image bordered rounded size='small' src='./help.png' /> </Grid.Column> </Grid.Row> <Grid.Row> <Grid.Column floated='right' > <Image size='mini' avatar src='./help.png' /> </Grid.Column> </Grid.Row> </Grid> ) export default ImageExampleLink 其中图像文件的路径位置没有问题,但是运行中发现图像死活不显示,只显示一个通用的系统提供的那种你常见的占位符形式。 npm install semantic-ui-react --save 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里导入 上述步骤没有什么问题,因为我使用其他许多组件(我是在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,} from 'semantic-ui-react' import help from './help.png'; const ImageExampleLink = () => ( <Grid container stackable verticalAlign='middle'> <Grid.Row> <Grid.Column floated='left' width={4}> <Image bordered rounded size='small' src={help} /> </Grid.Column> <Grid.Column floated='right' width={4}> <Image bordered rounded size='small' src={help} /> </Grid.Column> </Grid.Row> <Grid.Row> <Grid.Column floated='right' > <Image size='mini' avatar src={help} /> </Grid.Column> </Grid.Row> </Grid> ) export default ImageExampleLink 请注意上面代码最初的import语句和改进后的Image组件的src属性值的表达方式。再试运行,OK! 有关这种原因的深层官方解决仍然在探索中,有此问题的,可暂时参考一下。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |