在 reactjs 中渲染本地图像/javascript 片段

Question

我有一些时间在 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 } 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>
    )
  }
}

2) 如何在 jsx/react 中显示 javascript sn-ps 而不会出现任何错误？ （比如在堆栈溢出时显示代码 sn-ps）。浏览器似乎试图运行代码（并拒绝它）'<script&gt';...'</script&gt';' 实现不起作用:)

非常感谢！

Answer 1

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

第一个必须与提供文件的位置有关。尝试删除“./”并将其更改为 / 或任何在本地为您的应用程序提供服务的公共路径。如果你使用 webpack，你可以使用加载器 (file-loader) 让你做require('path to image')，当它被吐出来时，它会有正确的路径。

第二个真的很有趣。你不能只使用<pre> 和<code/>，因为 JSX 不是普通的 HTML。它是一个预处理器，可以在需要时为您创建React.createElement。如果您尝试以下方法，让我们看看您可能会得到什么

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

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

关闭！你得到function foo() 渲染到屏幕上。我们错过了{}，因为这是 JSX 知道评估 JavaScript 表达式的一种方式。但我们实际上可以利用它来发挥我们的优势。使用可以是多行的 ES6 字符串文字，由 JSX 表达式语法 ({}) 包围，以显示代码 sn-ps。

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

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

这样，您可以绕过 JSX 使用的一些怪癖/语法并仍然输出代码。

Answer 2

1. 使用此语法

<img className="kittens" src={require('./img/kittens.jpg')} />

在 webpack 中使用 url-loader。如果文件不是太大，这将内联一些图像，如果文件太大，则将文件复制到您的分发包。

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

   {`我的代码`}