アップしたボタンが表示されない。

[hoso]

Dreamweaver 2021 で、html を修正し、FFFTP でアップしました。

Web で確認すると、ボタンがアップされません。

ボタンは、 png で作成しましたが、Google Developer Tool で確認すると、

png ではなく、text として読み込まれているようで、それが原因でWeb 上で

表示されないようです。

このような現象をお分かりの方ご連絡いただければありがたいです。

よろしくお願いします。

[Ten A]

添付の画像を見る限り画像が正常にリンクされていないだけのようにも見え、なんの判断も出来ません。FFFTPの使い方が悪い可能性もありますが、通常は拡張子が正しければ適切にアップロードされるはずですのでアップロードしたリモートサイトでのファイルの状態を確認してみてください。場合によってはアップロードした画像をダウンロードして検証する必要もあるかと思います。

また、Dwでリモートサイトの管理を行う方法を避けているのは何故でしょう？

[hoso]

ご連絡有難うございます。

画像の拡張子を再度確認します。(拡張子の大文字小文字を含めて)

>Dwでリモートサイトの管理を行う方法を避けているのは何故でしょう？

以前から、FFFTP を利用していたので、そのまま使っていました。

DW　リモートサイトで試してみます。

[Ten A]

リモートサイトとローカルの同期設定についてはマニュアルの以下のページを読むと良いでしょう。
https://helpx.adobe.com/jp/dreamweaver/user-guide.html/jp/dreamweaver/using/dreamweaver-sites.ug.htm...

[hoso]

ご連絡有難うございます。
当方では、img フォルダーの中に、ボタンイメージを.png でアップロードしております。
しかし、Google のデベロッパーツールで見ますと、err となっており、当該ボタンのエラー内容
が　text となっておりました。そのためアップロードは行われているにも関わらずエラーとなっております。
前にご指摘いただいた通り、DW のサイト管理で確認したいと思います。

[r360studio Kazue Mori]

hosoさん、こんにちは。
↑こちらの返信、恐らく私にいただいたものだと思うので、こちらにつなげますね。

個人的に興味がありましたので、議題にあがっている「画像が適切なモードでアップロードされないと、どのようにエラーが見えるのか？」をもう少し検証してみました。

実験結果は、次のURLにアップしています。
https://r360.heteml.net/LaboratorySite/linkbroken-test.html

● FFFTPを用いた時、拡張子が誤っていると、PNG画像が正しくアップされないのかを検証してみました。

一例として、拡張子を全角（home-irastoya-ascii.ＰＮＧ）にあえて間違えて、FFFTPからアップロードしてみたところ、問題なく画像としてアップされました。

実験結果の「1.2)」にあるように、拡張子が異なっていても、FFFTPはPNG画像を正しいモードでアップするようです。

（png画像なのに拡張子jpgにしたり、拡張子なしでアップロードしたりも試しましたが、画像自身は正常にアップロードされました。
さすがに、拡張子を txt にすると、テキストファイルだと判断されて、ASCIIモードでアップロードしてしまいましたが。）

※この正常にというのは、拡張子に基づいてFFFTPの「転送モード」が自動でバイナリ／ASCIIモードを切り替えることを指しています。

画像の場合は「バイナリモード」、テキストの場合は「ASCIIモード」でアップします。

参考：転送モードの選択
http://www.cs.reitaku-u.ac.jp/infosci/netwk/ffftp/index.html

●PNG画像が表示されない理由として、「バイナリモード」でアップするところ、「ASCIIモード」でアップしてしまった場合の Chrome デベロッパーツールのエラー表示

FFFTPを用いて、あえて間違えて、PNG画像を「ASCIIモード」でアップしました(実験結果、1.1))。これは、当然、ブラウザでの画像表示がリンク切れになります。

が、Chrome デベロッパーツールのエラー表示（Console）には、何もでてきませんでした。

以上です。
実験結果が、なにかのお役に立ちました幸いです。

※気になって調べただけですので、特に返信は不要です。

[hoso]

その後の連絡

試してみましたが、うまくいかないので、PC再起動したところ

解決出来ました。PCの中があれていたのだと思います。

お手数掛けました。

[r360studio Kazue Mori]

hosoさん、ご連絡ありがとうございます。

解決されたそうでよかったです。

(^_^)

[hoso]

いろいろとご親切にご連絡有難うございます。
未だ解決できませんが、今後もいろいろ試してみます。今回はこれで終了にさせていただき、
また何かありましたら、連絡しますのでよろしくお願いします。

[r360studio Kazue Mori]

hoso さん、こんにちは。

添付の Err画面.PNG を拝見する限り、ボタン用の画像が、HTMLのimgタグで指定した所にアップロードされていないようです。

pngの画像がテキストで読み込まれているのではなく、

画像が壊れたようなアイコンが画像のパスのリンク切れ（imgタグのsrc属性のリンク切れ）を表し、その隣のテキストは代替文字（imgタグのalt属性に指定したテキスト）を表示しています。

ボタン画像部分の、imgタグのsrc要素に指定した画像パス（画像の場所・ファイル名を指し示すパス）を確認してみてください。

こちらも、同様のエラー再現するページを作ってみました。
https://r360.heteml.net/LaboratorySite/linkbroken-test.html

1）では、imgタグのsrc要素に指定した画像のファイル名が間違っていて、hosoさんの状況と同じように、画像のリンク切れのアイコンがでています。

2）は正しく指定した状態です。

●imgのsrc要素に指定した位置に、画像が存在するかどうかのチェック方法

（ブラウザ・Chromeの場合）

ブラウザでサーバーにアップロードしたHTMLページを表示し、画像のリンク切れアイコンを右クリックし、「新しいタブで画像を開く」を実行すると、src要素で指定した場所で画像が開きます。

画像がウェブサーバー上に存在していないと「ファイルがありません（File Not Found や 404Errorのようなメッセージ）」が表示されます。

この「ファイルがありません」の時に、ブラウザのアドレス欄に表示されるサーバーの場所に、画像をアップロードすればOKです。

ご参考になれば幸いです。
(^_^)