Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to solve the semantic-ui-react image component does not display the image problem, has a certain reference value, interested friends can refer to, I hope you read this article after a great harvest, the following let Xiaobian take you to understand.

problem

React provides a very scientific technology for developing the front-end view layer of Web applications. With the help of semantic-ui for React, it is easy to build UI components in common web page development. However, recently, when analyzing various components provided by React, it was found that there is a small problem with the Image component, which is recorded here.

My original code form import React from 'react'import { Grid, Image,} from 'semantic-ui-react'const ImageExampleLink = () => ( )export default ImageExampleLink

There is no problem with the path location of the image file, but it is found that the image is dead and not displayed during operation, only showing the common placeholder form provided by a common system.

Then, through Google browser search analysis, I found a seemingly similar topic: "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).

In fact, the above problem is different from mine. I did import the css file used by semantic-ui-react system. My installation and usage is as follows:

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.

Then import it in index.js.

import 'semantic-ui-css/semantic.min.css';

The above steps were fine because I used many of the other components (which I tested using various components in app.js) without problems.

Semantic UI React requires a Semantic UI CSS, you forgot to set it up, here is instations. "。I followed this link and simply went to the official display site, nothing, I was already familiar with this place. However, prompted by this point, I changed the address form of the src attribute in my code to the following JSX language recommendation:

import React from 'react'import { Grid, Image,} from 'semantic-ui-react'import help from './ help.png';const ImageExampleLink = () => ( )export default ImageExampleLink

Notice how the src attribute value of the original import statement and the improved Image component are expressed in the code above. Run it again, OK!

Thank you for reading this article carefully. I hope that Xiaobian's article "How to solve the problem that semantic-ui-react image components do not display images" will be helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.