如何在jQuery success循环函数中为img标签设置src属性？

你的问题出在Blade模板语法不能在前端jQuery代码里直接使用：{{url('...')}}是Laravel服务器端解析的语法，前端JS运行时，浏览器会把它当成普通字符串，不会转换成有效的图片URL，导致图片无法加载。

两种可行的解决方式： #

方式一：提前在页面中定义基础URL（推荐） #

在你的Blade模板页面里（比如<head>标签内），先输出网站的基础URL到全局变量：

<script>
    // 由Laravel服务器解析后，baseUrl会变成你的网站根URL，比如http://yourdomain.com
    const baseUrl = "{{ url('/') }}";
</script>

然后在jQuery的success函数中，用这个全局变量拼接图片路径，同时优化模板字符串的写法（用${变量名}直接插入，不用繁琐的字符串拼接）：

success: function(data) {
    if (data.data.length > 0) {
        let html = "";
        for (let i = 0; i < data.data.length; i++) {
            const item = data.data[i];
            html += `
                <div class="col-md-4 content_box">
                    <div class="card" style="width: 20rem;">
                        <img class="card-img-top" src="${baseUrl}/all_images/model_logos/${item.model_image}" >
                        <div class="card-body">
                            <p class="card-text"><b>MAKE:</b>${item.make_id}</p>
                            <p class="card-text"><b>Model:</b>${item.model}</p>
                            <p class="card-text"><b>model ar:</b>${item.model_ar}</p>
                        </div>
                    </div>
                </div>
            `;
        }
        // 别忘了把html插入到页面的容器里，比如$('#container').html(html);
    }
}

方式二：直接使用根路径前缀 #

如果你的网站部署在域名根目录下，可以直接用/开头的绝对路径，浏览器会自动拼接当前域名：

success: function(data) {
    if (data.data.length > 0) {
        let html = "";
        for (let i = 0; i < data.data.length; i++) {
            const item = data.data[i];
            html += `
                <div class="col-md-4 content_box">
                    <div class="card" style="width: 20rem;">
                        <img class="card-img-top" src="/all_images/model_logos/${item.model_image}" >
                        <div class="card-body">
                            <p class="card-text"><b>MAKE:</b>${item.make_id}</p>
                            <p class="card-text"><b>Model:</b>${item.model}</p>
                            <p class="card-text"><b>model ar:</b>${item.model_ar}</p>
                        </div>
                    </div>
                </div>
            `;
        }
        // 插入到页面容器
    }
}

注意：如果你的图片路径是相对路径或者部署在子目录下，方式一的兼容性更好。

内容的提问来源于stack exchange，提问作者Cookie