图像的动态导入反应

问题描述 投票:0回答:1

我正在尝试从项目中的本地文件夹动态渲染图像

对象结构看起来像这样

{
        id: 2,
        text: 'How would you describe your level of influence in management of the farm?',
        type: 'cardChoice',
        choices: [
          {
            id: 1,
            text: 'I am the primary decision maker',
            questionId: 'Hm?',
            value: 'I am the primary decision maker',
            image: '1.jpg',
          },
          {
            id: 2,
            text: 'I hent',
            questionId: 'Hrm?',
            value: 'I',
            image: '2.jpg',
          },
          {
            id: 3,
            text: 'I arm',
            questionId: '?',
            value: 'Irm',
            image: '3.jpg',
          },
        ],
      },

在我的组件中,选择包含图像的文件夹const baseUrl = '../../assets/images/CNA' 之后,作为回报,我尝试渲染图像

<img src={`${baseUrl}'${questionChoice.image}'`} alt={questionChoice.text} />

页面呈现,但是我的图像没有加载,而是显示我的alt

这里是我的全部内容

const CardChoiceQuestions = ({ cardChoiceArray, currentAnswer, updateCurrent, submitAnswer }) => {
  const { id, value } = currentAnswer
  const baseUrl = '../../assets/images/CNA'
  return (
    <ButtonContainer>
      {cardChoiceArray.map(questionChoice => {
        return (
          <Button
            active={questionChoice.id === id}
            type="button"
            key={questionChoice.id}
            onClick={() => {
              const answer = { id: questionChoice.id, value: questionChoice.value }
              updateCurrent(answer)
              submitAnswer()
            }}
          >
            <p>{questionChoice.text}</p>
            <img src={`${baseUrl}${questionChoice.image}`} alt={questionChoice.text} />
          </Button>
        )
      })}
    </ButtonContainer>
  )
}
reactjs image oop ecmascript-6
1个回答
0
投票

我没有笔记本电脑在我面前,但我注意到了几件事。您的基本网址后是否需要斜杠“ /”?另外,字符串连接应在$符号后的一组方括号中完成。不知道这是否是问题,请尝试一些console.log(string path)amd验证它是否在您认为的位置。看来路径可能是错误的。与构建动态url相比,您可以更好地使用条件渲染图像,但是无论哪种方式它都应在更改时渲染。


0
投票
<img src={`${baseUrl}/${questionChoice.image}`} alt={questionChoice.text} />
© www.soinside.com 2019 - 2024. All rights reserved.