如何導入圖像以使用 Rails 7 做出反應

Question

錯誤] 無法解析 "logo.png" │ 從 'logo.png' 08:55:46 js.1 導入徽標 | ╵

import logo from './logo.png'

import logo from './images/logo.png'

import logo from '../images/logo.png'

import logo from './images/logo'

我不斷收到：無法解決導入問題

期望圖像在反應中呈現

Answer 1

為 esbuild 添加加載器 他們有一個列表，列出了您可以添加到項目中的不同類型的加載器

Answer 2

在package.json ：

在scripts部分，將--loader:.png=file添加到以下行：

"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",

前任：

"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --loader:.png=file",

這將允許您加載png文件。

然后在jsx中你可以像平常一樣導入和使用你的圖像：

前任。

import React from 'react'
import Image from '../path/to/your/image.png'

export default () => (
  <img src={Image} />
)

有關更多信息，請參見此處。

Answer 3

我設置了 rails，而不是在 rails 上做出反應，並且使用 web packer 導入圖像非常簡單