时间戳

首页 > 解决方案 > 如何将图像调用到reactjs和airtable中

reactjs - 如何将图像调用到reactjs和airtable中

问题描述

我正在使用airtable.com helloworld 示例代码。我的 logo.jpg 与 index.js 文件位于同一目录中

myproject-folder\frontend\index.js
myproject-folder\frontend\logo.png

airtable 应用程序未使用 webpack，因此我无法导入徽标图像。

我尝试按照下面的代码直接调用图像，但无法使其正常工作。

<img src={window.location.origin + './logo.jpg'} />
<img src={'./logo.jpg'} />

这是代码

import {
    initializeBlock,
    useBase,
    useRecords,
} from '@airtable/blocks/ui';
import React, { Component } from "react";



class App extends Component {
  render() {
    return (
      <div>
        <h2>Hello world from Airtable</h2>



<img src={'./logo.jpg'} />

        </p>
      </div>
    );
  }
}

export default App;

标签： reactjs

解决方案

如果我理解正确，您正在使用 webpack 构建您的应用程序。

Webpack 将资产视为依赖项。因此，您需要import图像并使用适当的加载器来处理徽标的文件类型。

来自webpack 的文档：

[...] 当您从“./my-image.png”导入 MyImage 时，该图像将被处理并添加到您的输出目录，并且 MyImage 变量将包含处理后该图像的最终 url。[...] 加载器将识别出这是一个本地文件，并将“./my-image.png”路径替换为输出目录中图像的最终路径。

在你的情况下，你可以这样做：

import React, { Component } from "react";
import {
    initializeBlock,
    useBase,
    useRecords,
} from '@airtable/blocks/ui';

import logo from './logo.png';

class App extends Component {
    render() {
        return (
            <div>
                <h2>Hello world from Airtable</h2>
                <img src={logo} />
            </div>
        );
    }
 }

 export default App;

然后你需要添加file-loader到你的 webpack 配置文件中：

{
    test: /\.(png|svg|jpg|gif)$/,
    use: [
        'file-loader',
    ],
},

推荐阅读