FuCrowRabbit commented 2 months ago

imgタグに書いたsrcのパスも、build時に出力してほしい

imgタグのsrc属性に/src/**でファイルを参照した場合、 npm run dev時は参照され、npm run build時にtransformされず結果的にリンク切れになります。

TSX

<img src="/src/assets/icons/icon.svg" />

/src/assets/icons/icon.svgはBUILDされない。

<img src="/src/assets/icons/icon.svg" /> <!-- リンク切れ -->

/src/assets/icons/icon.svgがBUILDされ、/dist/assets/images/icon.svgとして出力される。

<img src="/assets/images/icon.svg" /> <!-- 表示される -->

※ CSSの場合、url("/src/assets/icons/icon.svg")と書くとBUILDされます。統一性が欲しいところです。

qrac commented 2 months ago

@FuCrowRabbit ご指摘ありがとうございます！

以前はその仕様もあったのですが...画像パスがビルドされるか否かが分かりづらく、ビルドの度に画像パスのチェック処理が必要な点が画像コンポーネントと被るので削除しています。

v3の仕様だと以下のようにimportした画像はビルドされるのでパスも変換されます。

import imageUrl from "../assets/image.svg"

export default function () {
  return (
    <img src={imageUrl} width="220" height="108" alt="" />
  )
}

もしくは、処理されない public に置いてパスの変換をしない。

public
┗ assets
      ┗ image.svg

export default function () {
  return (
    <img src="/assets/image.svg" width="220" height="108" alt="" />
  )
}

ministaのv4はプラグイン制になりますので、オンオフ可能な機能として画像処理プラグインに含ませるか、または別のプラグインとして作るのはありかと思います。

pluginImage({ autoImport: true })

pluginImageAutoImport()

qrac commented 2 months ago

@FuCrowRabbit こちらの機能をv4のデフォルト機能として実装しました！ srcパスのCSS・JSをViteのinputに渡す機能がありまして、処理が似ていたので同じタイミングで画像も取得するようにしました。

FuCrowRabbit commented 1 month ago

ご対応ありがとうございました。取り急ぎ、v4で確認したいと思います。