Question

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

对象结构如下

{
        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>
  )
}

Answer 1

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

Answer 2

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

这样使用

Answer 3

把它留在这里，以防有人碰到这个...

<img src={require(`../../assets/images/CNA/${questionChoice.image}`)} alt={questionChoice.text} />

不确定为什么我不能使用${baseUrl}，但这暂时有效。

动态导入图像反应

3 个答案: