反应中的动态图像 src 链接不起作用（多次尝试）

Question

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

我已经尝试了多种方法来 link 在下面的组件中添加我的 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 放在 public 文件夹中，但它不起作用：

Answer 1

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

由于您想动态设置图片 src 属性，解决方法是按照官方建议将图片添加到 public 文件夹中文档：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 重新启动您的应用程序。

上面的屏幕截图 link：

反应中的动态图像 src 链接不起作用（多次尝试）

Dynamic image src linking in react doesn`t work (multiple tries)

image

src

reactjs

react-image