在 reactjs 中呈现本地 images/javascript 片段

Question

我有一些时间在 React 中渲染：

1) 对于我正在处理的项目，显示从网站提供的图像没有问题，但是当我尝试从本地 machine/saved 硬盘驱动器提供文件时，我收到 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 片段而不出现任何错误？（比如在堆栈溢出时在此处显示代码片段）。浏览器似乎试图运行代码（并拒绝它） '<script&gt';...'</script&gt';' 实现没有工作:)

非常感谢！

Answer 1

使用这个语法

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

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

我相信你可以通过使用模板字面量让 webpack 为你转义所有代码：

{`我的代码`}

Answer 2

所以这些看起来像是两个不同的问题。

第一个必须与提供文件的位置有关。尝试删除“./”并将其更改为 / 或在本地为您的应用提供服务的任何 public 路径。如果您使用的是 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 表达式语法 ({}) 包围来显示代码片段。

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

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

这样，您可以绕过一些 quirks/syntax JSX 使用并仍然输出代码。

在 reactjs 中呈现本地 images/javascript 片段

Rendering local images/javascript snippets in reactjs

javascript

css

image

reactjs

webpack-dev-server