相关疑难解决方法(0)

我正在使用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找不到资源.

我正在尝试将本地 png 图像导入到我的 ts webpack 项目中，但出现以下错误。

TS2307: Cannot find module './images/logo.png'.

我所有的其他模块都可以正常导入，即；我的 css、svg 和 ts 文件。它似乎只发生在 png 上。

我的 webpack.config.js 模块部分

module: {
    rules: [{
      test: /\.ts$/,
      use:['ts-loader']
    },{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },{
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      use: ['url-loader?limit=100000']
    },{
      test: /\.png$/,
      use: ['file-loader']
    }]
  }

我的 tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "module": "CommonJS",
    "target": "ES5",
    "lib": ["DOM", "ES2015.Promise", "ES5"],
    "allowJs": true,
    "alwaysStrict": true
  }
}

我的进口声明

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

我的文件结构

root
-src
--css
--images
---logo.png …

我无法在headercomponent.ts中导入图像.我怀疑这是因为我在编译ts(使用webpack ts loader)时出错了,因为同样的事情与react(其中组件是用es6编写的)一起工作

错误位置是

//headercomponent.ts
import {Component, View} from "angular2/core";
import {ROUTER_DIRECTIVES, Router} from "angular2/router";
import {AuthService} from "../../services/auth/auth.service";
import logoSource from "../../images/logo.png"; //**THIS CAUSES ERROR**  Cannot find module '../../images/logo.png'

@Component({
    selector: 'my-header',
    //templateUrl:'components/header/header.tmpl.html' ,
    template: `<header class="main-header">
  <div class="top-bar">
    <div class="top-bar-title">
      <a href="/"><img src="{{logoSource}}"></a>
    </div>

我的webpack配置是

// webpack.config.js
'use strict';

var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = path.join(__dirname,'public');
//const TARGET = process.env.npm_lifecycle_event;
console.log("bp " + basePath)
module.exports …

我正在声明一个包含图像的界面.我需要给它什么类型.

export interface AdInterface {
    email: string;
    mobile: number;
    image?:   ??
}

我的 .tsx 文件中有以下代码：

import L from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

Typescript 正在抱怨第二行和第三行。不仅是 linter，还有 TS 编译器本身。

具体来说，linter 表示“它找不到模块‘blabla/icon.png’或其相应的类型声明。但是，导入 L 是可以的。

任何人都知道为什么会发生这种情况以及如何解决这个问题？

我的 tsconfig 文件如下所示：

{
  "compilerOptions": {
      "outDir": "./dist/",        // path to output directory
      "sourceMap": true,          // allow sourcemap support
      "strictNullChecks": true,   // enable strict null checks as a best practice
      "module": "esnext",         // specify module code generation
      "jsx": "react",             // use typescript to transpile jsx to js
      "target": "es5",            // specify ECMAScript target version
      "allowJs": …