jQueryで画像のsrcが取得できない

Question

前提・実現したいこと

image_tagから画像を取得したいです

発生している問題

var src = $('.sell-upload-figure').children('img').attr('src');
  console.log(src);
で調べても"undefind"と返される

該当のソースコード

<label for="item_images">
<div class='clearfix have-item-0 sell-upload-dropbox'>
<input class="sell-upload-drop-file" multiple="multiple" style="display: none;" type="file" name="item[images][]" id="item_images" />
<pre>
ドラッグアンドドロップ
またはクリックしてファイルをアップロード</pre>
</div>
<ul class='has-error-text'>
</ul>
</label>
<section class='modalArea' id='modalArea'>
<div class='modalBg' id='modalBg'>
</div>
<div class='modalWrappers'>
<div class='modalContents'>
<div class='modal-bold'>
写真を切りとる
</div>
<label for="item_images">
<span style='cursor: pointer;'>
写真を変更する
</span>
</label>
<i class='fas fa-camera'></i>
</div>
<div class='sell-crop-editor'>
<canvas height='300' id='c1' style='cursor: grab;' width='400'></canvas>
<div class='sell-crop-range'>
<i class='fas fa-camera small-camera'></i>
<input class='input-range-default' id='zoom-slider' max='2' min='1' name='scale' step='0.01' type='range'>
<i class='fas fa-camera'></i>
</div>
</div>
<div class='clearfix'>
<li class='cansel-button' id='closeModal'>
<a href="/items/new?method=post">
キャンセル
</a>
</li>
<li class='ok-button'>
<a href="">
完了
</a>

$(document).on("click", ".sell-upload-edit", function (e) {
    e.preventDefault();
    $('#modalArea').fadeIn();
  });
  $('#closeModal , #modalBg').click(function(){
    $('#modalArea').fadeOut();
  });

onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  /* Imageオブジェクトを生成 */
  var img = new Image();
  var src = $('.sell-upload-figure').children('img').attr('src');
  console.log(src);
  // img.src = "/images/sample.jpg?";
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

試したこと

一通りDOM操作は実行しましたが画像の情報は取得できませんでした。

補足情報（FW/ツールのバージョンなど）

Comments

[m.ts10806]

前回質問でお願いしたことがあまり反映されていませんが・・・。
タグ、コードの提示（フレームワークのビューではなくhtmlソース）
お願いしますね。このタグでこの内容では合致していませんし、その分、回答を得る機会を失しています。

[takagitoshinari]

すみません！修正させていただきました！ご指摘いただきありがとうございます????‍♂️

[m.ts10806]

うーん。このhtmlは正しくないので静的環境ではちゃんと再現確認ができません（たぶんCSSも必要です）
正しいhtmlが提示できそうにないならタグはRuby On Railsがあったほうがいいように思います。

Answer 1

var src = $('.sell-upload-figure').children('img').attr('src');

console.log(src);
で調べても"undefind"と返される

.sell-upload-figureが提示されたHTML内のどこにも無いから。

Comments

[takagitoshinari]

夜遅くにありがとうございます。一応renderで対応していて別のファイルにHTMLがあります。
こちらで何か解決のきっかけにはなりませんでしょうか？
%li.sell-upload-item{class: "upload-item-#{@item.images.index(uploaded_image) + 1}"}
=form.hidden_field :uploaded_image, {name: "item[uploaded_images][]",value: "#{uploaded_image.blob.key}"}
%figure.sell-upload-figure
=image_tag uploaded_image.variant(resize: "150x150")
.sell-upload-button
=link_to "編集", "", class: "sell-upload-edit"
=link_to "削除", "", class: "sell-upload-delete"