Question

这是我的角色组件，我试图让图像显示（后来我想动态实现它，但我甚至无法通过硬编码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文件。< / p>

因此，您需要根据包含它的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";

即使图片位于同一文件夹

3 个答案: