在reactjs中呈现本地图像/javascript片段

我在React中进行了一些渲染：

1） 对于我正在进行的项目，显示从网站提供的图像是没有问题的，但是当我尝试从本地机器提供/保存在硬盘上的文件时，我会收到404个错误

这项工作：

import React, { Component } from 'react'
import { render } from 'react-dom'


    export default class aPage extends Component {

      render() {
        return (
          <div>
            <div className="kittensExample">
               <img className="kittens" src = 'https://kittensonsomewebpage.jpg' />
            </div>
          </div>
        )
      }
    }

import React，{Component}来自“React”
从'react dom'导入{render}
导出默认类aPage扩展组件{
render（）{
返回(
)
}
}

这并不是：

import React, { Component } from 'react'
import { render } from 'react-dom'


export default class aPage extends Component {

  render() {
    return (
      <div>
        <div className="localCompKittens">
          <img className="kittens" src = './img/kittens.jpg' />

        </div>

      </div>
    )
  }
}

import React，{Component}来自“React”
从'react dom'导入{render}
导出默认类aPage扩展组件{
render（）{
返回(
)
}
}

2） 如何在jsx/react中显示javascript片段而不出现任何错误？（如在堆栈溢出上显示此处的代码段）。浏览器似乎试图运行代码（并拒绝它）

'script>'；…'/脚本>'；'实现不起作用：）

非常感谢

使用此语法

将url加载器与网页包一起使用。如果文件不太大，这将内联一些图像，如果文件太大，则将其复制到分发包中

我相信您可以使用模板文字让webpack为您转义所有代码：


{`我的代码`}

所以这似乎是两个不同的问题

第一个问题是文件从哪里送达。尝试删除“/”并将其更改为
/
或任何在本地为您的应用程序提供服务的公共路径。如果您使用的是webpack，那么可以使用loader（）来执行
require（'path to image'）
，当它被吐出时，它将拥有正确的路径

第二个确实很有趣。你不能只使用

var Code = React.createClass({
  render() {
    return (
      <pre>
        <code>
          function foo() {}
        </code>
      </pre>
    );
  }
});

ReactDOM.render(
  <Code />,
  document.getElementById('container')
);

);
}
});
ReactDOM.render(
，
document.getElementById（'容器'）
);

接近！您可以将
函数foo（）
呈现到屏幕上。我们缺少
{}
，因为这是JSX计算JavaScript表达式的一种方法。但我们实际上可以利用这一点来为我们带来好处。使用由JSX表达式语法（
{}
）包围的ES6字符串文本（可以是多行）来显示代码片段

var code=React.createClass({
render:function（）{
返回(

{`函数foo（）{}`}

);
}
});
ReactDOM.render(
，
document.getElementById（'容器'）
);

这样，您就可以绕过JSX使用的一些怪癖/语法，仍然可以输出代码。
听起来很简单！不幸的是，我收到错误“avatarph.png意外角色”�' " 在dev服务器中。它似乎试图将映像数据复制粘贴到jsx@Nativ这可能是您的网页设置。您需要确保将“jpg”放入url加载程序的测试中
var Code = React.createClass({
  render: function() {
    return (
      <pre>
        <code>
         {`function foo() {}`}
        <code/>
      </pre>
    );
  }
});

ReactDOM.render(
  <Code />,
  document.getElementById('container')
);