我正在使用 **reactjs ** 和 **typescript ** 創建一個應用程式，但是在組件中加載 **images ** 時遇到了問題。
我在控制臺中的錯誤
Uncaught Error: Cannot find module '../images/test.png'
at webpackEmptyContext...
這是我的組件：
import { IProject } from '../interfaces/IProject'
import pin from '../svgs/pin.svg'
function Project(props: { project: IProject }) {
const project = props.project
return (
<>
<div className='project'>
<img className='pin' src={pin} alt='pin' />
<div>
<img alt='project gif' src={require(project.image)} />
<span>{project.title}</span>
</div>
</div>
</>
)
}
export default Project
注意：影像存盤在“images”檔案夾中，專案組件存盤在“components”檔案夾中 **NB#2：**第一個影像“pin”正常加載。
感謝您的所有幫助?抱歉，如果這是一個nooby問題。
我試過了
- 替換它
(project.image)，('../images/test.png')如果我這樣做，它會起作用，但我希望能夠顯示道具傳遞的影像 src。 - 出于測驗目的，我添加了一個
const projectImage = '../images/test.png并替換require(project.image)為require(projectImage)它不起作用 - 我創建了index.d.ts檔案（根據我在互聯網上找到的解決方案）并
declare module '*.jpg'為 jpeg 和 png 添加了相同的內容。它沒有解決我的問題 - 改變影像的路徑
- 我還安裝了檔案加載器
uj5u.com熱心網友回復：
更新變數值以僅包含這樣的名稱
project.image = 'test.png'
然后添加相對路徑
require(`../images/${project.image}`)
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/520404.html
下一篇：png圖片懸停CSS效果