这篇文章主要介绍了如何解决semantic-ui-react图像组件不显示图像的问题，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司是一家专业提供海曙企业网站建设,专注与成都网站设计、网站制作、HTML5建站、小程序制作等业务。10年已为海曙众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

问题

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！

感谢你能够认真阅读完这篇文章，希望小编分享的“如何解决semantic-ui-react图像组件不显示图像的问题”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享题目：如何解决semantic-ui-react图像组件不显示图像的问题-创新互联
文章位置：http://kswjz.com/article/ccipip.html