react-app中如何引用本地图片资源

最新推荐文章于 2024-07-23 17:26:15 发布

人间草木96

最新推荐文章于 2024-07-23 17:26:15 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：个人总结 react

本文链接：https://blog.youkuaiyun.com/qq_43258252/article/details/87935305

个人总结同时被 2 个专栏收录

122 篇文章

订阅专栏

react

21 篇文章

订阅专栏

本文详细介绍了在React项目中如何正确导入和展示图片的方法，包括两种常见的图片使用方式：直接导入和使用require函数。通过具体代码示例，展示了如何在组件中插入图片并确保路径的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方便你复制~~~

import React, { Component } from 'react'

// 引入图片  方法1
import imgs from '../../images/test.jpg'

class wordOfMouth extends Component {
  render() {
    return (
      <div className="wordOfMouth">
        wordOfMouth口碑
        <br />
        {/* 使用图片 方法1 */}
        <img alt="404" src={imgs} />
        {/* 使用图片 方法2 */}
        <img alt="404" src={require('../../images/test.jpg')} />
      </div>
    )
  }
}

export default wordOfMouth