題名の通り、FFFTPにホームページをアップロードすると画像に×印がつき表示しません。
自分のPCから入ると画像は表示するので、ディレクトリがおかしいということはないと思います。
何か、この状態で画像が表示されなくなる心当たりのある方はアドバイスをお願いします。
常にバイナリモードにしましたが、解決されません。
<img src="images/image.jpg" /> の形で画像フォルダを作ってます。
他に、リンクにも飛べないですし、枠線なども表示しません。
OSがウィンドウズ10なのですが、関係ありますか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答9件
0
上の画像は、FFFTPのテンポラリを表示してるようですが・・・そのディレクトリ配下に画像はありますか?
サーバにあげた状態でのブラウザ表示はどうなっていますか?
・・・はずしている様ならスルーしてください。
投稿2015/08/20 01:24
総合スコア6851
0
画像を転送する際、バイナリーモードで転送していますか?
うっかりアスキーモードで転送してしまうと画像ファイルが壊れて表示出来なくなります。
念のためご確認を。
悩んでいても先へ進めないので、初心に戻り、不具合の可能性を一つずつ消して行ってください。
その際、既に確認済みである、とか、間違っている筈がない、といった先入観は完全に捨ててください。
大文字小文字の違い、ファイル拡張子と実際のフォーマットの違いなど、思わぬ間違いで躓くケースがとても多いのですが、我々『外野』には情報が少なすぎて切り分け出来ません。
挙げた画像をダブルクリックすると、画像が表示されず文字化けが表示される
とのことですので、エンコード関連の問題がないか?という観点で再確認することをお勧めします。
ザックリとした確認ポイントとしては…
-
画像そのものを表示できるか
-
ご使用のサイトでは、htmlソースをどの文字コードで作成することが期待されているか
-
問題のページのhtmlは、実際にはどの文字コードで記載されているか(Shift_JIS/UTF-8/EUC?)
-
問題のページのhtmlのheaderでは、どのようなエンコード指定をしているか(スペルミス等はないか)
-
ブラウザの文字コード設定はどうなっているか
-
他のブラウザでは正しく表示されるか
-
画像そのものの表示
ブラウザのアドレスバーに画像のURLを直に入力して、画像が表示されるか確認してみてください。
例)
http://xxxx.co.jp/images/image.jpg
file:///C:/Users/〜/images/image.jpg
→もし表示されれば、画像そのものではなくhtml(+CSS)側に問題があると推察されます。
2〜4. これらが全て一致している必要があります。
たとえば、4. htmlのエンコード指定が正しくないと、ブラウザによって挙動が変わってしまう可能性が高いです。
また、同じUTF-8と言ってもBOMありになっていると問題の発生する場合があります。
- ブラウザ自体の文字コード設定が想定外のものになっていませんか?
「4. htmlのエンコード指定」が正しくない(書いたつもりがスペルミス等で反映されていない)などが原因でブラウザの誤判定が生じ思わぬコードに設定されてしまうと、文字化けによりimgタグでエラーが発生し画像が表示されなくなる場合があります。
- もし他のブラウザでは正しく表示されるとすれば、ブラウザ固有の問題(必ずしもブラウザのバグということではなく、厳密ではないhtmlの場合の挙動の差)による可能性が高いです。
htmlの記述内容を確認する場合は、目視だけに頼らず、IEの開発者ツールやW3CのHTML文法チェッカー等を活用すると良いです。
おすすめのHTML文法、CSSチェックツール
投稿2015/08/19 00:01
編集2015/08/19 21:39総合スコア5936
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/19 01:44
2015/08/20 04:59
0
バツ印がついている画像のURLはどうなっているでしょうか?
確認してみてください。
投稿2015/08/18 23:52
総合スコア830
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 さまの書かれている、転送モード・文字コード見直しも必要かもしれません。
投稿2015/08/20 05:18
総合スコア596
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
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
総合スコア596
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/20 04:39
2015/08/20 05:43 編集