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

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

ただいまの
回答率

87.49%

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

解決済

回答 9

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 11K+

score 31

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

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

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

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

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

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

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


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

自分のPCから開いた場合
イメージ説明
サーバー上のファイル(文字化けのある部分)
![イメージ説明](2aed70e6ff005fa8f6db5af0ef56727d.png)

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







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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 9

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/19 08:59

    お返事ありがとうございます。

    画像からリンクを飛ばしていますが、
    ページに到達できません。

    あと、CSSが適応されていないような気がします。

    キャンセル

+1

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


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

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

挙げた画像をダブルクリックすると、画像が表示されず文字化けが表示される
とのことですので、エンコード関連の問題がないか?という観点で再確認することをお勧めします。

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

  1.  画像そのものを表示できるか
  2.  ご使用のサイトでは、htmlソースをどの文字コードで作成することが期待されているか
  3.  問題のページのhtmlは、実際にはどの文字コードで記載されているか(Shift_JIS/UTF-8/EUC?)
  4.  問題のページのhtmlのheaderでは、どのようなエンコード指定をしているか(スペルミス等はないか)
  5.  ブラウザの文字コード設定はどうなっているか
  6.  他のブラウザでは正しく表示されるか

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/19 09:09

    お返事有難うございます。

    バイナリモードの転送の仕方はどのようにするのでしょうか?

    キャンセル

  • 2015/08/19 10:44

    下記ページの「転送1の設定」をご覧ください。
    http://synclogue-navi.com/ffftp-setting#smoothplay11

    キャンセル

  • 2015/08/20 13:59

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/20 13:39

    お返事有難うございます。

    サーバーにあげた状態で、プラウザ表示すると一番上の画像になります。

    また、画像はダブルクリックすると文字化けが出てきます。

    キャンセル

  • 2015/08/20 14:40 編集

    文字化けについては、ちょっとおいといて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で追加されたコマンドなので、うちの環境じゃ使えないのかも?

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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」などと書き換えてはいかがでしょうか。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

アップロードされた画像

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/20 00:36

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

    キャンセル

  • 2015/08/20 04:02

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

    キャンセル

check解決した方法

-2

解決致しました。

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る