React.js图片无法加载求助：仅显示占位图标无报错

问题详情 #

React项目中，背景图可正常显示，但插入<img>标签时无报错，仅显示图片占位图标。图片存于src/assets文件夹，更换jpg/png格式、用原生HTML或组件方式插入均无效。

代码示例 #

App.js #

import React from 'react';
import './App.css';
import Television from './components/television/Television'

export default function App() {
  const title = 'xy';

  return (
    <div className="App">
      <h1>Welcome on {title}</h1>
      <div className='television'>
        <img src='assets/television.jpg'/>
      </div>
      <Television/>
    </div>
  );
}

Television.js #

import React from "react";

function Television() {
    return (
        <div>
            <img src="assets/television.jpg"/>
        </div>
    )
}

export default Television;

问题截图 #

图片占位图标显示效果

解决办法 #

React对src文件夹内资源的路径解析规则和普通HTML不同，直接写相对路径会导致打包后找不到资源，两种可行方案：

1. 导入资源后引用
   在组件里先导入图片资源，再将导入变量作为src值：

   // App.js 修改后
   import React from 'react';
   import './App.css';
   import Television from './components/television/Television';
   import tvImg from './assets/television.jpg'; // 导入图片
   
   export default function App() {
     const title = 'xy';
   
     return (
       <div className="App">
         <h1>Welcome on {title}</h1>
         <div className='television'>
           <img src={tvImg} alt="电视"/> {/* 使用导入的变量 */}
         </div>
         <Television/>
       </div>
     );
   }
   

   // Television.js 修改后
   import React from "react";
   import tvImg from '../../assets/television.jpg'; // 注意路径层级
   
   function Television() {
       return (
           <div>
               <img src={tvImg} alt="电视"/>
           </div>
       )
   }
   
   export default Television;
   

2. 将图片移至public文件夹
   把图片放到项目根目录的public文件夹下，直接用根路径引用：

   <img src="/television.jpg" alt="电视"/>
   

   这种方式无需导入，React会直接从public目录加载资源。

内容的提问来源于stack exchange，提问作者Gufi