環境

kintone
javascript
webpack

対象

kintoneプラグインの設定画面で画像を表示したい人

対象ファイル

webpack.config.js
config.html
config.js

webpack.config.js

今回は "asset/inline"を使用した方法でやります
cssの['style-loader', 'css-loader']は使っていること多くあると思うので以下の様に下に追記して下さい。

webpack.config.js

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            //追記部分
            {
                test: /\.(png|jpg|gif)$/,
                type: "asset/inline",
            },
        ],
    },

画像の格納

iconが格納されているimageフォルダに格納して下さい。

config.html

画像を設置したい場所にID付きのDIVなどで記入して下さい。

config.html

<div id="setting-sample"></div>

config.js

以下のコードを追記します

config.js

// 画像を格納した場所を相対パスで記入
import sampleImage from "../image/setting-sample.png";

(function(PLUGIN_ID) {
    'use strict';
    
    // htmlの方で指定したIDを設定
    const settingSample = document.getElementById("setting-sample"); 
    // imgタグの生成
    const img = document.createElement("img");
    // importした画像をsrcに指定
    img.src = sampleImage;
    // 埋め込み
    settingSample.appendChild(img);

結構遠回りしている様な気もするのでもっと簡単な方法あったら教えて下さい！

その他

Gitでソースを管理している場合にプッシュすると以下のエラーが出る場合はあります。

400 curl 22 The requested URL returned error: 400

その場合は以下のコマンドで対応できます。

git config http.postBuffer 500M