javascript - 图像未在 reactjs 中加载

标签 javascript reactjs npm webpack

我使用 create-react-app 创建了一个项目,我正在尝试加载图像,但我一直遇到相同的解析错误。

代码如下:

  1 import React, { Component } from 'react'
  2 import profile from './profile.png'
  3 
  4 class Jumbotron extends Component {
  5     render() {
  6         return (
  7             <div className="container">
  8                 <JumbotronName />
  9                 <JumbotronImg />
 10             </div>
 11         )
 12     }
 13 }
 14 
 15 const JumbotronName = () => {
 16     return (
 17         <div className="container">
 18             <h1>Temp</h1>
 19         </div>
 20     )
 21 }
 22 
 23 const JumbotronImg = () => {
 24     return (
 25         <div className="container">
 26             <img src{profile} alt="Profile" />
 27         </div>
 28     )
 29 }
 30 
 31 export default Jumbotron

两个文件(Jumbotron.js 和图像)都在 create-react-app 的 src 文件夹中。

当我用 npm start 运行时,我得到这个解析错误

./src/Jumbotron.js
  Line 26:22:  Parsing error: Unexpected token, expected "..."

  24 |     return (
  25 |         <div className="container">
> 26 |             <img src{profile} alt="Profile" />
     |                      ^
  27 |         </div>
  28 |     )
  29 | }

有什么想法吗?

编辑:如果我在第 26 行 (ex src{...profile}) 的配置文件之前放置“...”,它会编译但不会加载图像

最佳答案

你需要这样写等式符号

 <img src={profile} alt="Profile" />

关于javascript - 图像未在 reactjs 中加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58771902/

相关文章:

javascript - NodeJS 异步函数与 mongoose

javascript - 将函数传递、接收和使用到子组件中

npm - 如何在 Visual Studio Code 中获取 Live Server 的外部 URL?

typescript - 如果我的 .vue 文件都相同,如何避免重复?

javascript - selenium js webdriver.By

javascript - Azure 移动服务和 Ember.js

javascript - 无法在 &lt;input type ="number"> 中设置几个数字

javascript - React router v4 渲染元素内的组件

javascript - 在 NavLink 中激活时如何更改图标图像?

用于构建/测试与部署的 Node.js 项目布局