我正在使用React应用程序并使用Webpack和Typescript.我想在其中一个<img/>标签中使用图像.但是,我没有找到正确的方法来访问图像文件.
webpack.config.js:
...
module: {
rules: [
...
{
test: /\.(png|jpe?g|svg)$/,
loader: 'file-loader',
options: {
name: 'assets/[name].[ext]',
}
}
]
app.tsx:
...
render() {
return <img src='/assets/logo-large.png' alt="logo"/>
}
运行应用程序时,assets/logo-large.png找不到资源.
我正在尝试使用导入添加图像
import image from '../assets/images/picture.jpg
我正在将 Typescript 与 gatsby 一起使用...奇怪的是它可以与普通的 javascript （.js ~ .jsx 文件）一起使用，但是当我使用（.ts ~ .tsx 文件）时它会抛出此错误
找不到模块“../assets/images/picture.jpg”或其相应的类型声明。TS(2307)
奇怪的是它与普通组件一起工作得很好，比如
import Header from '../components/Header'
这是我的tsconfig.json文件
{
"compilerOptions": {
"module": "commonjs",
"target": "esnext",
"jsx": "preserve",
"lib": [
"dom",
"es2015",
"es2017"
],
"strict": true,
"noEmit": true,
"isolatedModules": true,
"esModuleInterop": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true
},
"include": [
"./src/**/*"
]
}
这是gatsby-config.json 文件
module.exports = {
/* …