当我使用 Javascript 和 JQuery 单击显示按钮时，我想在显示模式中显示我的 td 的图像数据，但找不到 src 的路径

Question

我将 laravel 8 用于我的 web 应用程序。 在项目中，我使用 javascript 和 jquery 在显示和编辑模式中显示数据。 我只使用 laravel 8 来处理服务器端的数据。 文本数据工作正常，但对于图像数据，我想获取 src 属性值并将其设置为我的显示模式上 img 标记的 src 属性，基于使用 javascript 单击的显示按钮的最近 img 元素和 jquery。 但我没能做到这一点。 我不断收到错误消息 404 在我的浏览器控制台中找不到。 我尝试过使用相对路径，例如 my_full_img_path = "../../../public/storage/"+my_img_path; AND my_full_img_path = "{{ 资产('storage/"+my_img_path+"') }}"; 两者都没有工作....这是我收到的错误消息：1 GET http://127.0.0.1:8000/%7B%7B%20asset('storage/phone1.jpg')%20%7D%7D 404 （未找到）

这是我的节目 function 代码：

function show(){
    var category_name_td;
    var category_name_value;
    var category_description_td;
    var category_description_value;
    var image_td;
    var image_td_value;
    var my_img_path;
    var my_full_img_path;
    $(document).ready(function(){
        $(document).on('click','.show1',function(){
            category_name_td = $(this).closest("tr").find('td:nth-child(2)');
            category_name_value = category_name_td.text();
            category_description_td = $(this).closest("tr").find("td:nth-child(3)");
            category_description_value = category_description_td.text();
            
            image_td = $(this).closest("tr").find("td:nth-child(4) img");
            image_td_value = image_td.attr("src");
            console.log(image_td_value);
            my_img_path = image_td_value.slice(30,40);
            // my_full_img_path = "../../../public/storage/"+my_img_path;
            my_full_img_path = "{{ asset('storage/"+my_img_path+"') }}";
            console.log(my_full_img_path);
            $("#showmodal").modal('show');
            $("#categoryname").val(category_name_value);
            $("#categorydescription").val(category_description_value);
            $("#categoryimage").attr('src',my_full_img_path);
            // $("#gender").val(gender_td_value);
        })
    })
}

这是我用于显示模式的 index.blade.php 代码：

 <!-- Show Modal -->
   <div class="modal fade" id="showmodal" tabindex="-1" aria-labelledby="showmodal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="showmodal">List Of Categories</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="mb-3">
              <label for="categoryname" class="form-label">Category Name</label>
              <input type="text" id="categoryname" class="form-control" disabled>
            </div>
            <div class="mb-3">
              <label for="categorydescription" class="form-label">Category Description</label>
              <input type="text" id="categorydescription" class="form-control" disabled>
            </div>
            <div class="mb-3">
              <img src="" id="categoryimage" width="300" height="200">
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

这是我用于显示数据并触发显示按钮代码的表 td 代码：

<table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th scope="col">Category Name</th>
            <th scope="col">Category Description</th>
            <th scope="col">Image</th>
            <th scope="col">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach($category_data as $mycategory_data)
          <tr>
            <td>{{ $mycategory_data->id }}</td>
            <td>{{ $mycategory_data->categoryname }}</td>
            <td>{{ $mycategory_data->description }}</td>
            <td>
                <img src="{{ asset('storage/'.$mycategory_data->image) }}" width="100" height="100">
            </td>
            <td>
                <button class="btn btn-warning me-2 show1">Show</button>
                <button class="btn btn-primary me-2 edit">Edit</button>
                <button class="btn btn-danger me-2 delete1">Delete</button>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>

这些是我在 index.blade.php 正文下方的脚本标签：

@section('myscript')
<script src="{{ asset('js/myfunction.js') }}"></script>
<script>
        $("table thead tr th:first-of-type").hide();
        $("table tbody tr td:first-of-type").hide();
        $("#formedit div:first-of-type").hide();
        // $("#formedit div:first-of-type").find('label').hide();
        // $("#formedit div:first-of-type").find('input').hide();
        show();
        edit();
        remove();
</script>
@endsection

Answer 1

my_full_img_path = "{{ asset('storage/"+my_img_path+"') }}";

我认为这是出错的地方，因为 {{ }} 实际上是刀片从服务器返回时呈现的，而不是在客户端运行时呈现的。 你可以试试这个： my_full_img_path = "storage/" + my_img_path;

那么当你检查它应该变成http://127.0.0.1:8000/storage/phone1.jpg ，我认为这是你存储图像文件的地方？