質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

2731閲覧

Ag-grid内にローカルの画像を表示させたい

kei0005

総合スコア19

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/10/05 10:43

前提・実現したいこと

最近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)

申し訳ありませんがどのたかご教授お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問