html画像表示について

Question

htmlで画像を表示させようとしたのですが、フォルダ名に日本語が含まれているので×がでて上手く表示されません。
例<img src=無題.jpg>×
<img src=aa.jpg>○
フォルダ名を変更する以外に解決法はありませんか

Answer 1

パソコン内のローカル環境であれば
meta charset="UTF-8"
img src="日本語.jpg"
で表示可能です。

が、通常はサーバにアップロードするため
サーバの環境や表示するブラウザの環境に
依存することもございます。

基本的にやむを得ない場合を除いてこのような
使い方をする場合は使用する画像ファイル名は
全て漢字を使用しない方が良いです。
可能であれば今からでも全て英数字に変換した
方が良いかと思います。

数が多ければマクロなどを使ってファイル名を
一気に変換されてはいかがでしょうか？

Answer 2

クロームでF12押して、↓の感じだったら、

ファイルをUTF-8で保存する。↓

ちなみに「フォルダ名」が「ファイル名」の間違いでなければ、
ファイルのパス自体が間違ってることになる。

<img src=無題.jpg>

Answer 3

HTML5の仕様書を読んでみました。

img要素のsrc属性に設定できるのは「潜在的にスペースで囲まれた妥当な空でないURL」です[attr-img-src参照]。つまり、URLでなければなりません。URLのファイル名やフォルダ名に使える文字(パス区分)は英数字の他に一部の記号、パーセント符号化済みバイト、U+00A0以上の文字です。しかし、U+00A0以上の文字はURL構文解析器によりパーセント符号化済みバイトに変換されます[URL 符号位置注記参照]。そして、このURL構文解析器では、オプションの上書き符号化方式が与えられていなければ、UTF-8で符号化されて、パーセント符号化済みバイトになります。上書き符号化方式は与えるとはありませんので、UTF-8でパーセント符号化されると考えてよさそうです。注意すべき事は、HTML自体の符号化が何であるかは関係ありません。

つまり、<img src="無題.jpg">とあるとき、そのHTMLファイルのエンコードとmetaタグで指定されたエンコードが正しく一致しているのであれば、srcは正しく「無題.jpg」と認識されています。UTF-8である必要は全くなく、一致されしていれば、Shift_JISでも、EUC-JPでもかまいません。そして、次のように処理されます。

1. 文字列: 無題.jpg
2. Unicode列: U+7121 U+984C U+002E U+006A U+0070 U+0067
3. UTF-8バイト列: E7 84 A1 E9 A1 8C 2E 6A 70 67
4. パーセント符号化済み文字列: %E7%84%A1%E9%A1%8C.jpg

これがブラウザから見たURLになるため、ブラウザはHTMLのパスに基づいて、下記の何れかにアクセスします。

• httpの場合 … http://【現在のホスト名】/【親フォルダ】/%E7%84%A1%E9%A1%8C.jpg
• httpsの場合 … https://【現在のホスト名】/【親フォルダ】/%E7%84%A1%E9%A1%8C.jpg
• ローカルファイルの場合 … file:///【親フォルダ】/%E7%84%A1%E9%A1%8C.jpg

にアクセスします。

さて、httpとhttpsの場合はサーバ側の解釈になります。ローカルファイルの場合はブラウザでの解釈になります。

Linuxであれば、そのままパーセント符号化がデコードされ、[E7 84 A1 E9 A1 8C 2E 6A 70 67]というバイト列のファイル名をサーバ上のファイルシステムから探します。本来、ファイルシステムには符号化という概念はありません。つまり、OSがUTF-8として設定され、UTF-8としてファイル名を使ってさえいれば、うまくアクセスできるようになります。

WindowsやMacの場合はやや複雑です。パーセント符号化はデコードされた後に、UTF-8として解釈されます。つまり、「無題.jpg」という文字列として認識されます。しかし、NTFSやHFS+はUTF-16でファイル名が保存されています。ですので、認識された文字列をUTF-16にしてから、ファイル名にアクセスされます。こうして正しく「無題.jpg」というファイルを見つけ、表示することができます。

手元のMac(10.12)やWindows(10 1607)で試したところ、HTMLファイルがEUC-JPだろうがUTF-8だろうが、ほぼ上のように動作するようで、うまく表示できました。ですが、下記注意事項があります。

• HTML5の仕様であるため、HTML4でも同じようになるとは限りません。
• HTML5に準拠していない古いブラウザでは動作が異なる可能性が高いです(特に古いIE)。
• ローカルの場合、Microsoft Edgeではパーセント符号化済みバイトへの変換がされずに、そのままアクセスしているようです。(パーセント符号化済みにすると、逆にアクセスできなくなります)

以上のことから、次のようにすると良いと思います。

• 無用な混乱を避けるために、UTF-8のみを使う。
• パーセント符号化変換をしないブラウザを考慮して、初めからUTF-8をパーセント符号化したURLを使う。
• ローカルで表示確認するときは、Google Chromeを使う。(Microsoft Edgeは使わない)
• UTF-8のLinuxにUTF-8のファイル名でファイルをアップロードする。

もし、IISを使っていると言うことであれば、別途考える必要があるかもしれません。

---

【調べ切れていない所】

• MacにおけるUnicode正規化(NFDの問題)がどうなっているか？
• http/httpsにおけるMicrosoft Edgeの動作、パーセント符号化がされているのか？
• パーセント符号化されていないURLでサーバにアクセスされたとき、主なHTTPサーバがどのように動作するか？
• IISについてはあまりよくわかっていない。(バージョンによって動作が異なる？)

Answer 4

おそらく、サーバの文字コードとhtmlファイルの文字コードが一致しなければ日本語のファイル名を使用できません。
このやり方をしたことがないので確証はありませんが、サーバとhtmlファイルの文字コードを一致させれば可能だと思います。
しかしながら、サーバに合わせてファイル名をパーセントエンコード(URLエンコード)するのが一般的だと思いますし、私もそうします。

• URLエンコード - Google 検索

Re: aaaaaaaaaaaaaa さん

Answer 5

日本語でも表示されるはずなので
metaタグのcharsetを確認してみてはいかがでしょうか！
meta charset="UTF-8"

Answer 6

写真のファイル名に限らず、ファイル名は半角英数字が基本と本で読んだことがあります。
写真に漢字やひらがなを表記させたい場合は、altタグがあるのでそちらがあっているのかなと思いました。

Answer 7

<img src="無題.jpg"> でダメですか？