语义图像 UI 在 create-react-app 中不起作用

Question

我已经将其包含在我的 index.html 中。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>

我的 src 文件夹中 displayed.I 仍然没有图像，例如 tech.png，其中包含 Sample.js 和 index.js 个文件。

这是我的 Sample.js 文件：

import React from 'react';
import { Image} from 'semantic-ui-react';
import {Link} from 'react-router-dom';


export default class Sample extends React.Component {
 render(){
   return(
    <Image src='./src/tech.png' href as={Link} to="/Users"/>
   );

 }

帮我渲染一下图片。

Answer 1

这不应该是 CSS 问题。如果未安装 CSS，标记仍会呈现带有正确来源的 img 标记以显示图像。我认为可能发生的情况是，当 Webpack 运行时，您的图像实际上并未包含在构建中。默认情况下，/src 文件夹不会自动包含在 create-react-app.

中的任何构建中

要包含图片，您必须 require() 这样：

<Image
  as={Link}
  src={require('./src/tech.png')}
  to='/Users'
/>

这将允许您引用与 React 组件相关的图像。这不是 semantic-ui-react.

的问题

语义图像 UI 在 create-react-app 中不起作用

Image in Semantic UI not working in create-react-app

reactjs

create-react-app

semantic-ui-react