reactjs - react中的动态图像src链接不起作用（多次尝试）

Question

在我的项目中，我需要动态链接一个 img src。这是整个项目结构：

我已经尝试了多种方法来在以下组件中链接我的 imag src，正如您在我的代码的注释部分中看到的那样。路径本身不会是问题，因为第三次尝试，我不能使用，因为它不是动态的，效果很好。

我做错了什么？

import React from 'react';
import * as CommentStyles from './comment.module.scss';
// Only this works
import Image from '../../../../assets/image-anne.jpg';
 
function Comment({comment}) {
    return (
        <div>
            <div className={CommentStyles.firstRow}>
                {/* first try - didn`t work*/}
               {/* <img src={require('../../../../assets/image-anne.jpg')} /> */}
                {/* second try - didn`t work*/}
                {/* <img src={'../../../../assets/image-anne.jpg'}/> */}
                 {/* third try - didn`t work*/}
                <img src='../../../../assets/image-anne.jpg'/>
                {/* fourth try-works: */}
                {/* <img src={Image}/>  */}
                                    
                <div className="firstFlexItem">
                    <div className="name Username">
                        {comment.user.name} <br/>
                        {comment.user.username} 
                    </div>
                </div>

                <p>
                    Reply
                </p>
            </div>
            
        </div>
    )
}

export default Comment

---

我现在已将 jpg 放在公用文件夹中，但它不起作用：

Answer 1

我假设你已经使用 create-react-app 命令创建了你的 reactjs 项目。

由于您想动态设置图像 src 属性，因此解决方法是按照官方文档中的建议在公用文件夹中添加一个或多个图像：https : //create-react-app.dev/docs/using-the -public-folder/#when-to-use-the-public-folder

然后只需使用

<img src={`image-anne.jpg`} />

其中 src 具有相对于public文件夹的图像路径。这也可以动态设置并且可以正常工作

注意：如果这不起作用，请使用

<img src={process.env.PUBLIC_URL + '/image-anne.jpg'} /> 

并确保您终止当前会话并使用npm start或者yarn start如果您仍然看不到图像重新启动您的应用程序。

上面链接的截图：