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

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

新規登録して質問してみよう
ただいま回答率
85.48%
.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

1回答

5396閲覧

【ASP.ET Core】絶対パスで画像を表示

K_aito0122

総合スコア8

.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2020/03/16 07:17

前提・実現したいこと

ASP.NET DBに表示したい画像の絶対パスを持っているのですが、それを取得して画像を表示したいと思っています。

発生している問題・エラーメッセージ

//Model.Fig1には以下のような画像の絶対パスがあります //C:\Users\user01\Desktop\画像1.jpg <img src=Model.Fig1 alt="画面1">

上記コードは画像を表示したいViewです。
このような書き方をすると、altの値が画面に出力されています。

補足情報(FW/ツールのバージョンなど)

VS2019
ASP.NET Core MVC
Core Version 3.1.1

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/03/16 08:44

> ASP.NET DBに表示したい画像の絶対パスを持っているのですが、 その「絶対パス」とは何ですか? 前にも言いましたけど、回答者にエスパー能力を期待しないで、ここに書いてあることしか知り得ない第三者に分かるよう具体的に書きましょう。
takeaship

2020/03/16 08:49

ブラウザ側で実際に展開されているHTMLの当該部分はどうなっていますか?
退会済みユーザー

退会済みユーザー

2020/03/17 01:44 編集

質問者さんの言う「絶対パス」とは http で始まる URL のことではなくて、Windows OS のファイルシステムのパスで、DB にあるのは質問者さんの開発マシンの個人フォルダにある .jpg 画像ファイルのパスの文字列のようですが、そうなんですか? もしそうだとすると、それを img 要素の src 属性に設定するのは普通はあり得ない話です。 インタ―ネット / イントラネット上のユーザーがブラウザで質問者さんが作ったサイトを見るのですよね。それは他人の PC からブラウザ経由で質問者さんの PC の個人フォルダの画像を見ようとしているようなものです。そんなことができると思いますか? 一体全体何がしたいのでしょう?
K_aito0122

2020/03/18 01:04

したいことは、サイトを開いたときにサーバー上にある画像を表示することです。
退会済みユーザー

退会済みユーザー

2020/03/18 01:11

> サーバー上にある画像 具体的にどこですか? wwwroot 下なのか、そこではなくて web サーバーのどこかの別フォルダなのか? リモートにあるファイルサーバーなのかなど、それによって話がいろいろ違ってきます。
K_aito0122

2020/03/18 01:16

webサーバーの別のフォルダです。
退会済みユーザー

退会済みユーザー

2020/03/18 01:44

wwwroot 下の意味わかります? Visual Studio のソリューションエクスプローラーを見てください。そこにありますよね。それのことです。web サーバーの別フォルダに配置できるなら、そこに配置することもできるのでは? 「wwwroot 下」と「web サーバーの別フォルダ」では難易度が数倍(知識とスキルが十分でないと越えられない壁かも)違ってきます。可能であれば「wwwroot 下」一択です。前のスレッドの時のように茨の道の方を選ばないよう考えてみてください。
退会済みユーザー

退会済みユーザー

2020/03/18 08:02

質問者さん、また無言になってしまいましたが、どうするのですか? 考え中ならちょっと待ってくれと書くとか、あくまで「web サーバーの別フォルダ」ということならその旨書くとか、両方教えて欲しいならそう書くとか、ギブアップならそう宣言してクローズするとかしていただけませんか。無言は NG です。
K_aito0122

2020/03/19 06:42

遅くなりすいません。wwwroot下に変えようと思います。
guest

回答1

0

ベストアンサー

wwwroot下に変えようと思います。

画像ファイルは、当初の案の質問者さんの開発マシンの個人フォルダもしくは Web サーバーの任意のフォルダではなく、ASP.NET Core 3.1 MVC アプリのプロジェクトの wwwroot 下に置くということでレスします。

インターネット上でサービスを行う Web アプリを作っているのなら、img 属性の src 要素に設定するのは C:\Users\user01\Desktop\画像1.jpg などという Windows OS のファイルシステムのパスではダメで、地球の裏側の PC からでもアクセスできる URL でなければならないということは理解してますか?

そこが理解できてないと話が通じないので、もし分かってなければ勉強して理解できるようになってください。そこは分かっているという前提でレスを書きます。

質問者さんが作っている ASP.NET Core 3.1 MVC アプリの中で、地球の裏側の PC からアクセスできる URL という条件を満たすのが wwwroot 下のフォルダです。以下の画像のように images フォルダを作って(フォルダ名は任意)、その中に画像ファイルを配置してください。

イメージ説明

そうすれば、その中の 911GT2.jpg という画像は View に <img src="/images/911GT2.jpg" alt="" /> というコードを書けば表示されます。

DB に "/images/911GT2.jpg" という文字列を保存してあって、それを Model 経由で View に渡したいなら Controller のアクションメソッドで、例えば以下のように Model のプロパティに "/images/911GT2.jpg" という文字列を代入し、

public IActionResult Index() { var model = new Category { CategoryID = 1, CategoryName = "自動車", ImageUrl = "/images/911GT2.jpg" }; return View(model); }

View では以下のようにすれば表示されるはずです。

<img src="@Model.ImageUrl" alt="" />

画像が最初の質問者さんの案のように wwwroot 以外にあるときはこうは簡単には行きません。

画像のある場所から画像を取得して、そのバイト列を適切なヘッダと共にブラウザに送ることができるアクションメソッドを作成し、それを img 要素の src 属性に設定するということが必要になります。

そのアクションメソッドが作成できても、アクセス権の問題が残ってます。

そう言われてピンと来ないなら、画像ファイルは wwwroot 下に置く以外に選択肢はないと思います。

【追記】

画像ファイルの名前は「画像1」などという URL には使えない日本語ではなく、ASCII 文字限定としましょう。メジャーなブラウザはエンコードしてくれますが、全部が全部そうかは分かりません。トラブルの種をまくようなことは避けるのが賢明です。

投稿2020/03/19 09:59

編集2020/03/19 23:27
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問