时间戳

首页 > 解决方案 > 如何从图像源字符串中获取源的一部分？

javascript - 如何从图像源字符串中获取源的一部分？

问题描述

我想在 javascript 函数中调用图像的 src 的一部分。怎么办？

在 HTML 页面上有这个图像，其来源是数据库中的图像路径。我试图从图像 src 中提取这个图像路径到我的 javascript 函数的 src 中。

这是图像：

 <img id="Image4" alt="" style='height: 200px; width:120px' src='<%# ResizeTransform(Eval("image_path").ToString(),120,200) %>' class="thumbnailimg" />

js代码如下：

 <script type="text/javascript">
    $(document).ready(function() {
        $('.thumbnailimg').on('click', function () {
                var img = $('<img />', {
                //src: this.src,
                src: this.src("image_path"),
                'class': 'rs'

            });

            $('.img-container').html(img).show();
         });
      });
    </script>

我如何将图像 src 中的“image_path”提取到 js 函数的 src 中？目前，当我使用：src：this.src（“image_path”）时它不显示图像，而当我使用：src：this.src 时显示图像模糊。

标签： javascriptjqueryhtml

解决方案

您可以使用let src = $(this).attr('src');获取 src 属性。

更新：问题可能来自 ResizeTransform 函数。

您应该将属性添加data-original='<%# Eval("image_path").ToString() %>'到您的 img 标签并通过以下方式获取数据let src = $(this).data("original");

如果不能使用 data-original 使用 try srcset='<%# Eval("image_path").ToString() %>'and get data bylet src = $(this).data("srcset");

//data-original=<%=Eval("image_path").ToString()%>
$(document).ready(function() {
    $('.thumbnailimg').on('click', function () {
        //let src = $(this).attr('src');
        //let src = $(this).data("original");
        let src = $(this).attr("srcset");
        //alert(src);
        var img = $('<img />', {
            //src: this.src,
            src: src,

            'class': 'rs'


        });


        $('.img-container').html(img).show();
});
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="Image4" srcset='https://postcron.com/en/blog/wp-content/uploads/2017/01/social-media-image-sizes-2019-min.png' data-original='https://postcron.com/en/blog/wp-content/uploads/2017/01/social-media-image-sizes-2019-min.png' alt="" style='height: 60px; width:120px' src='https://postcron.com/en/blog/wp-content/uploads/2017/01/social-media-image-sizes-2019-min.png' class="thumbnailimg" />


<div class="img-container"></div>

推荐阅读