无法显示图像，即使它在同一文件夹中

Question

这是我的 angular 组件，我正在尝试获取要显示的图像（稍后我想动态实现它，但我什至无法通过硬编码 img src 使其工作）

正如你在我的图片中看到的，两个文件都在同一个文件夹中contents

内容-list.component.ts:

import { Component, OnInit } from '@angular/core';

import { Content } from './content.model';
import { ContentService } from './content.service';

@Component({
    selector: 'app-content-list',
    template: `
        <div class="contrainer col-md-8 col-md-offset-2">
            <div *ngFor="let content of contents">
                <div class="panel-body">
                    {{ content.file }}
                </div>
            </div>
            <img src="my.jpg" class="img-thumbnail" alt="Can't Display Image" width="304" height="236" />
        </div>
    `,
    styles:[`
    `]
})

export class ContentListComponent implements OnInit {
    contents: Content[];

    constructor(private contentService: ContentService) {}

    ngOnInit() {
        this.contentService.getMessages()
            .subscribe(
                (contents: Content[]) => {
                    this.contents = contents
                }
            );
    }
}

Answer 1

您尝试显示的图像的 src 路径应该与显示它的 HTML 页面相关， 而不是 模板或.ts 文件。

因此，您需要根据包含它的HTML更改图像src以包含特定路径。类似于：

<img src="/content/my.jpg" ... >

Answer 2

试试这个

<img src="./my.jpg" class="img-thumbnail" alt="Can't Display Image" width="304" height="236" />

Answer 3

想通了！它与 webpack 图像加载器有关

我将 webpack.config.common.js 设置为以下内容：

test: /\.(jpe?g|png|gif|svg)$/i,
                    loaders: ['file-loader?name=[name].[ext]', {
                    loader: 'image-webpack-loader',
                    query: {
                        mozjpeg: {
                            progressive: true,
                        },
                        gifsicle: {
                            interlaced: false,
                        },
                        optipng: {
                            optimizationLevel: 4,
                        },
                        pngquant: {
                            quality: '75-90',
                            speed: 3,
                        },
                    },
                }],

要引用图片，我必须使用 js/app/image_path

例如：

imageURL = "/js/app/my.jpg";

无法显示图像，即使它在同一文件夹中

Can't display image even though it's in the same folder

image

path

src

webpack

angular