前提・実現したいこと
最近Ag-Gridを使い始めている初心者です。Ag-Grid内に文字ではなくローカルの画像を表示する方法が分からずに困っております。
実現したいことは、(特に条件分岐などはさせずに)グリッド内にパスを指定する形で画像を表示させることです。
上画像の特定カラムのグリッド内に画像を表示させたい
発生している問題・確認したいこと
①Ag-Gridのチュートリアルや stack overflow にはURL指定で画像を表示させることが出来ているのですが、ローカルに保存してある画像を表示させる方法が見つからずに困っております。
http://localhost:4200/(params.value) 404 (Not Found)
該当のソースコード
stack overflow に記載されてあったソースコードを記載します
カスタムコンポーネント
typescript
1import { Component } from "@angular/core"; 2 3@Component({ 4 selector: 'app-image-formatter-cell', 5 template: `<img border="0" width="50" height="50" src=\"{{ params.value }}\">` }) 6 7export class ImageFormatterComponent { 8 params: any; 9 agInit(params: any){ 10 this.params = params; 11 } 12}
app.module.ts
TypeScript
1import { ImageFormatterComponent } from "./album/ImageFormatterComponent"; 2@NgModule({ 3 declarations: [ImageFormatterComponent], 4 imports: [ 5 AgGridModule.withComponents([ImageFormatterComponent]) 6 ],
カスタムコンポーネントを使用しているコンポーネント
TypeScript
1import { ImageFormatterComponent } from "./ImageFormatterComponent"; 2 columnDefs = [ 3 { headerName: 'Select', 4 field: 'Image', 5 width: 60, 6 sortable: false, 7 autoHeight: true, 8 cellRendererFramework: ImageFormatterComponent 9 }
試したこと
カスタムコンポーネントの
src=\"{{ params.value }}\
の部分を画像パスに変更してみたのですが、
http://localhost:4200/(params.value) 404 (Not Found)
となってしまい、ローカルの画像を指定することができませんでした。
補足情報(FW/ツールのバージョンなど)
Angular CLI: 12.2.7
Node: 16.9.0 (Unsupported)
Package Manager: npm 7.21.1
OS: win32 x64
Angular:
...
Package Version
@angular-devkit/architect 0.1202.7 (cli-only)
@angular-devkit/core 12.2.7 (cli-only)
@angular-devkit/schematics 12.2.7 (cli-only)
@schematics/angular 12.2.7 (cli-only)
申し訳ありませんがどのたかご教授お願い致します。
あなたの回答
tips
プレビュー