記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">&nbsp;<strong style="font-weight: 700;">画像のバイナリデータ</strong>を&nbsp;<strong style="font-weight: 700;">Base64 エンコード</strong>して&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">&lt;img&gt;</code> タグとして表示する処理です。</p><h2 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 18px / 24px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">コードの意味</h2><pre data-priority="2" style="color: rgb(17, 17, 17); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 8px; padding: 12px 20px; background: rgb(255, 255, 255); font: 14px / 20px monospace; display: block; white-space: pre-wrap; margin-right: 20px;">&lt;img src=&quot;data:image/jpeg;base64,@Convert.ToBase64String(item.KamokuImage)&quot; 
     alt=&quot;@item.KamokuName&quot; 
     style=&quot;width: 40px; height: auto;&quot; /&gt;
</code></pre><h3 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">1.&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">item.KamokuImage</code></h3><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">item</code> はビューに渡されたモデルの1行（例えば&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">foreach</code> の中の1要素）。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">KamokuImage</code> は&nbsp;<strong style="font-weight: 700;">画像データを保持する <code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">byte[]</code> 型のプロパティ</strong>。<ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">例: データベースの&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">varbinary</code> カラムから取得した画像。</li></ul></li></ul><h3 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">2.&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">Convert.ToBase64String(item.KamokuImage)</code></h3><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">C# の&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">Convert.ToBase64String</code> メソッドで、バイト配列を&nbsp;<strong style="font-weight: 700;">Base64 文字列</strong>に変換。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">Base64 はバイナリデータをテキスト化する方法で、HTML内に直接埋め込むために必要。</li></ul><h3 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">3.&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">src=&quot;data:image/jpeg;base64,...&quot;</code></h3><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">Data URI スキーム</strong>を使って、画像データを直接 HTML に埋め込む。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">data:image/jpeg;base64,</code> は「これは JPEG 画像で、Base64 形式ですよ」という宣言。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">その後に Base64 文字列が続く。</li></ul><h3 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">4.&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">alt=&quot;@item.KamokuName&quot;</code></h3><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">画像が表示できない場合に代替テキストとして表示される文字列。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">@item.KamokuName</code> は科目名などの文字列プロパティ。</li></ul><h3 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: inline-block; font: 18px / 22px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">5.&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">style=&quot;width: 40px; height: auto;&quot;</code></h3><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">CSS で画像の表示サイズを指定。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">幅を 40px に固定し、高さはアスペクト比を保って自動調整。</li></ul><h2 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 18px / 24px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">動作イメージ</h2><p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">もし&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">item.KamokuImage</code> にバイナリ画像が入っていれば、<br>HTML 出力は次のようになります（Base64 部分は省略）:</p><pre data-priority="2" style="color: rgb(17, 17, 17); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 8px; padding: 12px 20px; background: rgb(255, 255, 255); font: 14px / 20px monospace; display: block; white-space: pre-wrap; margin-right: 20px;">&lt;<span style="color: rgb(34, 134, 58);">img</span> <span style="color: rgb(0, 92, 197);">src</span>=<span style="color: rgb(3, 47, 98);">&quot;data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...&quot;</span> 
     <span style="color: rgb(0, 92, 197);">alt</span>=<span style="color: rgb(3, 47, 98);">&quot;数学&quot;</span> 
     <span style="color: rgb(0, 92, 197);">style</span>=<span style="color: rgb(3, 47, 98);">&quot;width: 40px; height: auto;&quot;</span> /&gt;
</code></pre><p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">ブラウザはこの Base64 データをデコードして画像として表示します。</p><h2 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 18px / 24px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">注意点</h2><ol style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgb(17, 17, 17); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert;"><strong style="font-weight: 700;">パフォーマンス</strong></p><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">大きな画像を Base64 で埋め込むと HTML サイズが大きくなり、ページ読み込みが遅くなる。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">多数の画像を表示する場合は、通常の URL 参照（<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">&lt;img src=&quot;/Images/xxx.jpg&quot;&gt;</code>）の方が効率的。</li></ul></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert;"><strong style="font-weight: 700;">MIMEタイプの指定</strong></p><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">image/jpeg</code> の部分は画像形式に合わせて変更（PNGなら&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">image/png</code>）。</li></ul></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><p style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; -webkit-line-clamp: revert;"><strong style="font-weight: 700;">Nullチェック</strong></p><ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">item.KamokuImage</code> が&nbsp;<code style="border: 1px solid rgb(221, 221, 221); border-radius: 4px; padding: 1px 4px; background: rgb(255, 255, 255); font: 14px / 20px monospace;">null</code> の場合はエラーになるため、条件分岐で回避する必要あり。</li></ul></li></ol><h2 data-bm="23" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 18px / 24px Roboto, sans-serif; color: rgb(17, 17, 17); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Nullチェック付きの安全な例</h2><pre data-priority="2" data-bm="24" style="color: rgb(17, 17, 17); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><code style="border: 1px solid rgb(221, 221, 221); border-radius: 8px; padding: 12px 20px; background: rgb(255, 255, 255); font: 14px / 20px monospace; display: block; white-space: pre-wrap; margin-right: 20px;">@if (item.KamokuImage != null &amp;&amp; item.KamokuImage.Length &gt; 0)
{
    &lt;img src=&quot;data:image/jpeg;base64,@Convert.ToBase64String(item.KamokuImage)&quot; 
         alt=&quot;@item.KamokuName&quot; 
         style=&quot;width: 40px; height: auto;&quot; /&gt;
}
else
{
    &lt;span&gt;No Image&lt;/span&gt;
}</code></pre><p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a></p>

添付画像

画像を変更

Back to List

//検索文：Editor内でHTMLコードをコピーさせる