图片无法加载反应打字稿

Question

这是我的<img>标签

  <li className="dropdown user user-menu">
                                <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                                    <img src="/public/assets/images/user2-160x160.jpg" className="user-image" alt="User Image" />
                                        <span className="hidden-xs">Alexander Pierce</span>
                                </a>
<li/>

这是我的结构

Answer 1

与其他任何模块一样，将图像导入顶部！ （假设您在typescript中启用了模块，然后将其作为变量传递给jsx：

import myimage from "./../.../path/images/user2-160x160.jpg";
...

 <img alt="media-icon-link" className="media-icon-link" src={myimage} />

Answer 2

如果图像位于公用文件夹中，例如我的文件夹结构：

"/assets/images/user2-160x160.jpg"

在您的<img> src中，而不是导入

'../../public/assets/images/user2-160x160.jpg'; 

这将起作用

<img className="user-image"  src="/assets/images/user2-160x160.jpg" alt="User Image" />

Answer 3

与以上答案相同，据我所知，您可以使用require api

<img alt="media-icon-link" className="media-icon-link" src={require("./../.../path/images/user2-160x160.jpg")} />

这取决于您的口味