我正在尝试从项目中的本地文件夹动态渲染图像
对象结构看起来像这样
{
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>
)
}
我没有笔记本电脑在我面前,但我注意到了几件事。您的基本网址后是否需要斜杠“ /”?另外,字符串连接应在$符号后的一组方括号中完成。不知道这是否是问题,请尝试一些console.log(string path)amd验证它是否在您认为的位置。看来路径可能是错误的。与构建动态url相比,您可以更好地使用条件渲染图像,但是无论哪种方式它都应在更改时渲染。
<img src={`${baseUrl}/${questionChoice.image}`} alt={questionChoice.text} />