Reduxでの画像表示について

Question

### 実現したいこと
使用PC MacBook Air
①Reduxで自身のFinderに入っている画像を表示したい。
②別件になってしまいますが、ファイルをimportする際に使用できないファイル名などがあれば教えていただきたいです。

ファイル構成は画像を参照ください。

発生している問題・分からないこと

①Reduxで自分が用意した画像をsrcフォルダ以下のimgフォルダに入れてimgタグのsrc属性にパスを指定しましたが、画像が表示されません。
②ファイルimportについて
ファイルをimport/exportする際に時折一定のファイル名だとうまくいかない場合があります。
今までそこまで気にしていなかったのですが、質問させていただきます。
原因は不明ですが、大文字小文字の「i」などが関連した際にエラーが多く起きる気がします。
エラーが出るような(もしくはエラーはでないが正常に読み込まれない)仕様があれば教えていただきたいです。

「該当のソースコード」には本件のReduxを構成する4つのファイルを載せています。
toolkitなどのimport分やあまり関連の無いコードは記載を省いています。

該当のソースコード

import cartItems from "../../cartitem";

const initialState = {
  cartItems: cartItems,
  amount: 4,
  total: 0,
};

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {},
});

  export default cartSlice.reducer;

↓SliceのinitialState値
const cartItems = [
  {
    id: 1,
    title: “テスト”,
    price: "12000",
    img: "./img/Test.jpg",
    amount: 1,
  },
  {
    〜〜〜省略〜〜〜
  },
];

export default cartItems;

import Alist from './Alist';

const CartContainer = () => {
    const  { amount, cartItems, total } = useSelector((state) => state.cart)
    if( amount < 1 ) {
      return (
　　 〜〜〜省略〜〜〜
      );
    }

    return (
      <section className='cart'>
        <div>
          {cartItems.map((item) => {
            return <Alist key={item.id} {...item}/>
          })}
        </div>
      </section>
    )   
};

export default CartContainer

const Alist = ({ id, img, title, price, amount }) => {
  return (
    <article className='cart-item'>
      <img src={img} alt="画像" />
        <h4>{img}</h4>
↑H4で{img}の内容を確認したところ、propsのimg(./img/Test.jpg)が受け取れていました。
      </div>
    </article>
  )
}

export default Alist

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Reactで画像を表示さ得るにはパスをimportすると出てきたのですが、Reduxの場合それをどのように実装するのかというところです。
しかし、下記のようにApp.jsで試しに実施しても画像が表示されなかったので、画像表示に関して全く解決策がわからない状態です。
import test from './img/Test.jpg'
function App() {
return (
<main>
<Navbar />
<CartContainer />
<img src="test" alt="テスト"/>
</main>
);
}
export default App;

補足

特になし

Comments

[ryuichi-works]

Alist.jsからimgフォルダを参照する場合は提供コードでは「./img/Test.jpg」となっていますが、Alist.jsからだと１階層上で「../img/Test.jpg」が正しい気がするのですがどうでしょうか？

[KAI]

ご回答ありがとうございます。
変更してみましたが、ダメでした。

[ryuichi-works]

App.jsで試しているコードですがimgタグのsrc属性の値がimportしてきた変数でなく、そのままのtestという文字列になっているようです。
<img src="test" alt="テスト"/>
下記のように修正してもTest.jpgが表示されませんか。相対パスはこちらの場合は『./img/Test.jpg』で合っている思います。
<img src={test} alt="テスト"/>
もしくは直接
<img src="./img/Test.jpg" alt="テスト"/>

[KAI]

// ご回答ありがとうございます。

// ご教授いただきました下記のコードで画像が表示されました。
// import test from '../img/Test.jpg'
// <img src={test} alt="画像" />

// ですが、今回stateのcartItemsのimgプロパティより画像パスを参照したい状況です。
// この場合、cartitemファイルからのパス指定は下記になるかと思います。

// import test from './img/Test.jpg'
// const cartItems = [
// {
// id: 1,
// title: “テスト”,
// price: "12000",
// img: {test},
// amount: 1,
// },
// {
// 〜〜〜省略〜〜〜
// },
// ];
// export default cartItems;

// しかし表示がされませんでした。

Reduxのstate(initialState)として別ファイルからimportして画像パス指定する場合何か違う書き方が必要なのでしょうかね？
調べても、分からなかったので教えていただけますと幸いです。

Answer 1

まず前提知識を共有させていただきます。「画像をどのように組み込むか」は、フレームワークまたはビルドツールの関心事です。なので、Redux とは関係ありません。

• フレームワークの例: Next.js, Remix
• ビルドツールの例: create-react-app, Vite

提示されたディレクトリ構造から察するに、create-react-app を使用されているようなので、create-react-app の公式ページから、関係する記述を探してみました。

https://create-react-app.dev/docs/adding-images-fonts-and-files
https://create-react-app.dev/docs/using-the-public-folder/

ここから分かることは、

1. まず、画像ファイルを import する ことが第一の選択肢
   • create-react-app によってセットアップされた webpack というバンドラーの仕事です。
2. import に適さないシーンであれば、第二の選択肢として、public フォルダを使う

です。

---

import した画像の使い方は、上記のページに書いてあるのが全てですが、提示されたコードで import を使うには、このように書きます。

ちなみに、test の中身は、もとのファイル名にぐちゃぐちゃした文字列が追加されたものになっている、と思います。このぐちゃぐちゃはハッシュと呼ばれるもので、平たく言うと「画像を更新して、デプロイしたのに、ずっと古い画像が表示されてしまう」という事態を避けるための方法です。

import test from './img/Test.jpg' 
// test 変数に、画像のパスが入ります。
// ビルド・デプロイされても、ちゃんとデプロイ後の画像パスが test 変数に入っています。

function App() {
  console.log(test); 
  // このように console.log を使えば、
  // test の正体がただの「画像パスの入った変数」であることが分かります。


  return (
    <main>
      <Navbar />
      <CartContainer />
      <img src={test} alt="テスト"/>
    </main>
  );
}
export default App;