React.JS使用dangerouslySetInnerHTML渲染本地图片仅显示替代文本如何解决

核心错误原因 #

• 你在字符串中拼接的{local_image.png}属于JSX专属的插值语法，普通字符串里不会被React解析，浏览器会把{local_image.png}当作相对路径去请求，自然找不到图片。同时你通过import导入的local_image本身就是打包后的完整图片路径字符串，不需要额外加.png后缀。
• dangerouslySetInnerHTML用法错误，它要求传入格式为{ __html: 你的HTML字符串 }的对象，不能直接传入字符串。
• 类组件中调用自身方法需要加this.前缀，第18行直接写displayXImages(3)会报方法未定义错误。
• 用字符串拼接HTML再通过dangerouslySetInnerHTML渲染的方式不仅容易出问题，还存在XSS安全风险，不推荐使用。

方案1：直接生成JSX元素数组（更推荐） #

完全不需要用到dangerouslySetInnerHTML，直接返回React元素数组即可，符合React的最佳实践：

import React from 'react'
import local_image from '../images/local_image.png'

export default class Album extends React.Component {

  displayXImages(num) { // line 6
    // 生成长度为num的数组，映射为img元素列表
    return Array.from({length: num}).map((_, index) => (
      <img key={index} src={local_image} alt='local image' className='image' />
    ))
  }

  render() {
    return(
      <main>
        <div className='album'>
          {/* 直接渲染返回的元素数组 */}
          {this.displayXImages(3)}
        </div>
        <img src={local_image} alt='local image' className='image' />
      </main>
    )
  }
}

方案2：修复你原有写法的问题 #

如果你非要使用dangerouslySetInnerHTML的写法，按下面修改即可运行：

import React from 'react'
import local_image from '../images/local_image.png'

export default class Album extends React.Component {

  displayXImages(num) { // line 6
    let x = 0
    let img_html = ''
    while (x < num) {
      // 直接把导入的图片路径拼接到字符串里
      img_html = img_html + `<img src="${local_image}" alt='local image' className='image' />`
      x = x + 1
    }
    
    return img_html
  }

  render() {
    const inner_html = this.displayXImages(3) // 加this.前缀调用类方法

    return(
      <main>
        {/* 按要求传入带__html属性的对象 */}
        <div className='album' dangerouslySetInnerHTML={{__html: inner_html}} />
        <img src={local_image} alt='local image' className='image' />
      </main>
    )
  }
}

注：你原代码第23行写的src={local_image.png}属于笔误，实际能正常运行的代码应该是去掉.png后缀的src={local_image}。

内容的提问来源于stack exchange，提问作者Brittany Farrell