Question

嗨我有一个基于create-react-app构建的react / redux应用程序（因此没有webpack，叹息，我猜测这是一个大问题）在redux商店中使用图像文件名。为了渲染图像，我必须提供它们的路径。到目前为止，这段代码是唯一有用的<img src={require(`../../assets/${avatar}`)} />，但在render函数中放置一个require语句似乎很麻烦。另外，我无法弄清楚如何测试它（how do i get a jest/enzyme test to pass this require statement containing a path and a prop）。我的应用程序目前没有路由，但我最终会添加一些，如果我可以使用react-router来解决这个问题，那么我会。相关代码如下：

模块

import React from 'react'
import PropTypes from 'prop-types'

const UserProfile = ({name='', avatar=''}) => {

    return (
        <section className='bg-bright padding-m'>
            <img alt='avatar' src={require(`../../assets/${avatar}`)} />
            {name}
        </section>
    )

}

UserProfile.propTypes = {
    name: PropTypes.string,
    avatar: PropTypes.string
}

export default UserProfile

它使用的redux存储数据看起来像

{
    "name": "a name",
    "avatar": "name.jpg"
  }

有问题的行呈现为

<img alt="avatar" src="/static/media/admin.34e378b0.jpg">

THX！

Answer 1

似乎很难将一个require语句放在渲染函数
中

当然，只有在启用了适当的webpack插件的情况下，提供的代码才能正常运行，并且提供了image-loader之类的加载器。
当提供一些相对路径时，webpack执行包括目标dist构建中的所有根目录，然后在运行时执行变量读取并从dist build https://webpack.js.org/api/module-methods/#require-context获取资源。如果需要，只需在部分媒体解析器中重新配置webpack-config：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js#L157

如何在文件名位于redux存储中时指定图像路径

1 个答案: