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

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

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

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

Q&A

解決済

9回答

16117閲覧

FFFTPにアップロードすると、画像が表示しない。

piyotaka

総合スコア39

HTML

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

0グッド

1クリップ

投稿2015/08/18 23:26

編集2015/08/20 04:47

題名の通り、FFFTPにホームページをアップロードすると画像に×印がつき表示しません。

自分のPCから入ると画像は表示するので、ディレクトリがおかしいということはないと思います。

何か、この状態で画像が表示されなくなる心当たりのある方はアドバイスをお願いします。

常にバイナリモードにしましたが、解決されません。

<img src="images/image.jpg" /> の形で画像フォルダを作ってます。

他に、リンクにも飛べないですし、枠線なども表示しません。

OSがウィンドウズ10なのですが、関係ありますか?

サーバーから開いた場合
イメージ説明

自分のPCから開いた場合
イメージ説明

サーバー上のファイル(文字化けのある部分)
イメージ説明

サーバー上のファイル(文字化けのない部分)
イメージ説明

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

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

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

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

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

guest

回答9

0

上の画像は、FFFTPのテンポラリを表示してるようですが・・・そのディレクトリ配下に画像はありますか?
サーバにあげた状態でのブラウザ表示はどうなっていますか?
・・・はずしている様ならスルーしてください。

投稿2015/08/20 01:24

cateye

総合スコア6851

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

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

piyotaka

2015/08/20 04:39

お返事有難うございます。 サーバーにあげた状態で、プラウザ表示すると一番上の画像になります。 また、画像はダブルクリックすると文字化けが出てきます。
cateye

2015/08/20 05:43 編集

文字化けについては、ちょっとおいといてw サブディレクトリがimgになっているようですが、<img src="images/image.jpg" />とは違いますね? で、ほかに気になった事・・・ 通常LISTコマンドで表示させると思うのですがMLSDになっている。 FFFTPはあまり詳しくないので設定だと思うのですが? うちの環境では下記のようなメッセージが出ます。 >LIST 150 Opening ASCII mode data connection for '/bin/ls'. 226 Transfer complete. ファイル一覧の取得は正常終了しました. (784 Bytes MLSDはExtensions to FTPで追加されたコマンドなので、うちの環境じゃ使えないのかも?
guest

0

画像を転送する際、バイナリーモードで転送していますか?
うっかりアスキーモードで転送してしまうと画像ファイルが壊れて表示出来なくなります。
念のためご確認を。


悩んでいても先へ進めないので、初心に戻り、不具合の可能性を一つずつ消して行ってください。

参考1
参考2

その際、既に確認済みである、とか、間違っている筈がない、といった先入観は完全に捨ててください。
大文字小文字の違い、ファイル拡張子と実際のフォーマットの違いなど、思わぬ間違いで躓くケースがとても多いのですが、我々『外野』には情報が少なすぎて切り分け出来ません。

挙げた画像をダブルクリックすると、画像が表示されず文字化けが表示される

とのことですので、エンコード関連の問題がないか?という観点で再確認することをお勧めします。

ザックリとした確認ポイントとしては…

  1. 画像そのものを表示できるか

  2. ご使用のサイトでは、htmlソースをどの文字コードで作成することが期待されているか

  3. 問題のページのhtmlは、実際にはどの文字コードで記載されているか(Shift_JIS/UTF-8/EUC?)

  4. 問題のページのhtmlのheaderでは、どのようなエンコード指定をしているか(スペルミス等はないか)

  5. ブラウザの文字コード設定はどうなっているか

  6. 他のブラウザでは正しく表示されるか

  7. 画像そのものの表示

ブラウザのアドレスバーに画像のURLを直に入力して、画像が表示されるか確認してみてください。
例)
http://xxxx.co.jp/images/image.jpg
file:///C:/Users/〜/images/image.jpg
→もし表示されれば、画像そのものではなくhtml(+CSS)側に問題があると推察されます。

2〜4. これらが全て一致している必要があります。
たとえば、4. htmlのエンコード指定が正しくないと、ブラウザによって挙動が変わってしまう可能性が高いです。
また、同じUTF-8と言ってもBOMありになっていると問題の発生する場合があります。

  1. ブラウザ自体の文字コード設定が想定外のものになっていませんか?

「4. htmlのエンコード指定」が正しくない(書いたつもりがスペルミス等で反映されていない)などが原因でブラウザの誤判定が生じ思わぬコードに設定されてしまうと、文字化けによりimgタグでエラーが発生し画像が表示されなくなる場合があります。

  1. もし他のブラウザでは正しく表示されるとすれば、ブラウザ固有の問題(必ずしもブラウザのバグということではなく、厳密ではないhtmlの場合の挙動の差)による可能性が高いです。

htmlの記述内容を確認する場合は、目視だけに頼らず、IEの開発者ツールやW3CのHTML文法チェッカー等を活用すると良いです。
おすすめのHTML文法、CSSチェックツール

投稿2015/08/19 00:01

編集2015/08/19 21:39
pi-chan

総合スコア5936

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

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

piyotaka

2015/08/19 00:09

お返事有難うございます。 バイナリモードの転送の仕方はどのようにするのでしょうか?
pi-chan

2015/08/20 04:59

追加されたスクリーンショット(FFFTP)の1枚目を見るとリモート側のファイル名が文字化けしている様ですが・・・ FFFTPの文字コードの設定が悪くファイル名自体が文字化けして、対象ファイルを見つけられない状態になっているのでは!? ファイル名には、カッコも含め、マルチバイト文字を使用しないのがセオリーなのですけれども・・・ しかし、ファイルの内容ではなくファイル名や配置場所(=パス)の方に問題があるのかどうか、の切り分けは、先にご提案した「1. 画像そのものの表示」を試してみれば一発で分かりますよね?
guest

0

バツ印がついている画像のURLはどうなっているでしょうか?
確認してみてください。

投稿2015/08/18 23:52

Yasha_Wedyue

総合スコア830

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

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

piyotaka

2015/08/18 23:59

お返事ありがとうございます。 画像からリンクを飛ばしていますが、 ページに到達できません。 あと、CSSが適応されていないような気がします。
guest

0

自己解決

解決致しました。

どうやら、画像のディレクトリとファイルを半角英数字以外を使った事が原因のようです。

協力してくださった皆様有難うございました。

投稿2015/08/23 02:45

piyotaka

総合スコア39

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

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

0

アップロードされた画像

これをみる限り、ファイル名にマルチバイトを使っていませんか?

ファイル名には半角の英数字、アンダースコア、ハイフンを使いましょう。

投稿2015/08/20 06:25

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

1番上の画像がサーバーに上げたものをブラウザで表示したとありますが、
URLが2番目の画像(開発環境?)と同じく
file:///C:/Users/{ユーザー名}/~ となっている様ですが、
サーバーに上げたサイトのURLはコレで本当に正しいのでしょうか?

AppData フォルダーとは
WIndoew10のドキュメントによると /AppData/Local は、たとえば、通常、Web ブラウザーはここに一時データを保存します。とありますし、URLにTempとあるので、一時ファイルをサーバーに上がっているものと思っていて見ているのかな?と思いました。
一時ファイルなので、画像などのファイルも一時ファイルとして保存されているでしょうが、一時ファイルの保存が必ずしもパス構造も持って保存されるとは限らないとも思いますし、画像データも一時ファイルにする際に何らかの処理を行って文字列に変換して保存してる可能性もあるでしょう。
一時ファイルをサーバーに上がっているものと思って閲覧されているのであれば、これらの可能性から画像・CSSが読み込まれない。画像を表示しても文字列が表示される。という可能性が高いのではないでしょうか?あくまで推測ですが。

また、3番目、4番目のFTPのキャプチャですが
ファイル名に文字化けが認められますので
pi-chan さまの書かれている、転送モード・文字コード見直しも必要かもしれません。

参考
FFFTPでアップロードした日本語ファイルのファイル名が文字化けしてしまいます。

投稿2015/08/20 05:18

KiKiKi_KiKi

総合スコア596

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

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

0

その画像は本当にアップされていますか?
一番基礎的な部分ですがどうでしょうか。

投稿2015/08/19 15:15

Cf_cwd

総合スコア730

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

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

piyotaka

2015/08/19 15:36

挙げた画像をダブルクリックすると、画像が表示されず文字化けが表示されるんですが、これはアップされていないという事でしょうか?
Cf_cwd

2015/08/19 19:02

文字化けですか? 可能であればスクリーンショットやコードを挙げた方が良いかと思います。 回答者はエスパーではないので予想には限界がありますし
guest

0

htmlと同じ場所に画像をおいているなら、
<img src="image.jpg" />
htmlの場所にサブフォルダ(サブディレクトリ)を作って画像をおいてあるなら、
<img src="./images/image.jpg" />とか<img src="images/image.jpg" />
htmlの場所から1階層登って別においてあるなら、
<img src="../images/image.jpg" />
みたいになります。

Windowsでコーディングしていて、例えば<img src="C:\Users\XXXXXX\Pictures\image.jpg" />みたいな記述になっていたら画像は表示されません。

【追記】
サーバーにアップロードするファイル名に日本語の文字を使うのは避けて、
半角英数字のみになるように書き換えてから、アップロードしてみてはいかがでしょうか。
ファイル名にカッコなどの記号をつけるのも、誤動作を招くので、「_1」などと書き換えてはいかがでしょうか。

投稿2015/08/19 03:26

編集2015/08/21 01:19
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

pi-chanさんがおっしゃられている通り、FTPでのアップロードの方法の可能性もあります。
別の可能性として、画像をアップロードしているディレクトリのパーミッションが読み取りが出来ないものになっている可能性もあるかと思います。
使われているサーバーによって推奨されるパーミッションの設定は異なったりしますが、例としてロリポップで示されているパーミッション関連のリンクを張っておきます↓
パーミッションについて / ホームページ / マニュアル - レンタルサーバーならロリポップ!

可能性は低いとは思いますが、開発環境(自分のPC)で自分のPCのルートからとかで画像のパス指定を行っていると、当然サーバー上ではパスが異なりますので、画像は表示されなくなってしまいます。
パスを相対指定で指定してあるのであれば、この可能性は無いでしょう。

さまざまな理由が考えられますので、一度に全部やってみるのではなく、1つ1つ原因となっている可能性を潰していくのが良いと思います。

投稿2015/08/19 00:36

KiKiKi_KiKi

総合スコア596

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問