Q&A
加工後、どのように出力し直したのでしょうか
photoshopで背景透過した画像をVScodeで使おうとしています。
問題が、画像を読み込まないことです。
・開発環境mac
photoshopで加工する前は読み込めていました。
imgタグの読み込みに問題があるならば、Webサイト上で画像が認識されないマークが表示されますが、
今回はvsCodeの表示上でエラーが発生しているので画像ファイルでの読み込み問題かと考えています。
画面を見ていただくと.pngの拡張子で画像を挿入しております。
photoshopで加工したのはbank.pngとlogo.pngのみです。
logo.pngは元からあるファイルになります。
よって、拡張子は関係ないかなと思っておりますが、それだと何が原因で読み込めないのかが分からないところです。
ご指導いただける優しい方、何卒アドバイスをよろしくお願いいたします。
質問いただきありがとうございます(^^)
Googleで検索に書かれていたように、
ファイルがから別名で保存という形を取りました。
photoshopのアプリ欄に保存欄が見えなかったので、macの上部ツールバーから選択しました。
別名で保存をクリックしたところ、保存先に「icloud」か「デスクトップ」の選択が出てきましたので、指示の通りに保存をしました。
保存先の選択はデスクトップです。
Photoshopのバージョン次第かもしれませんが、保存時にフォーマット選択しませんでしたか？
あと確認してもらいたいのが、
○PCの画像表示ツール（Mac分からないのでImageViewer的なやつ）だと表示できるか
○標準のペイントツールで表示できるか
○画像を直接ブラウザにドラッグ&ドロップするとどうなるか
透過色を指定したPNG画像自体のプレビューは(こちらの手元の)VSCodeでは問題なく行なえるので、画像がPNG形式になっていないのでは。
確認したところ、フォーマット選択していませんでした。
選択し、保存をかけたところ表示されるようになりました！ありがとうございます！！
なるほど。やはり出力不正でしたね。
ご自身で解決までの経緯を回答として投稿し、自己解決としてください
使い方をお教えいただきありがとうございます！
早速そのようにさせていただきます！
回答1件
0
自己解決
保存方法のフォーマット選択ができていなかった。
保存方法が、photoshopのままであったため、VSCodeでphotoshopを開こうとしていたのか、
エラーが発生するようになってしまった。
フォーマットに.pngといった、画像ファイルの拡張子を選択しておくことで表示ができるようになる。
通常のファイル生成のように、ファイル名から直書きで拡張子が変更できるわけではないので、次からはしっかり見逃さないようにしていこうと思いました！
投稿2021/03/12 06:08
総合スコア2
ヒントとして見た目の拡張子ってただの文字列でしかないので惑わされないようにしたほうが良いです。
Mime-typeという概念があるのでそこに着目してください。
直書きで表せる拡張子は文字列でしかないんですね。
Mime-type、初めて聞く単語です。
ご指導頂きありがとうございます！m(_ _)m
はい。それを利用して見た目jpgでも中身exeとか実行ファイルをアップロードさせてウィルスばらまくなんてよくある手口です。
ファイルアップロード、メール送信は特にそのあたりを考慮して実装する必要があるということですね（質問者さんには直接関係しないかも知れませんが、知っておくとかなり違います）
大変参考になります。
やり手が巧妙なんですね。
確かに相手からしたら、ファイルが届いたとしてもぱっと見の判断素材が拡張子くらいですから、ふと気になって開いてみたらなんてことになりかねませんよね。
セキュリティ問題も限りなく手を尽くすべきなのがよくわかります。
そういったコメントをいただけるのとても助かりますm(_ _)m
あなたの回答
tips
プレビュー
