使用jQuery修改img标签src属性失败求助（Laravel环境）

这问题我之前也踩过类似的坑！核心原因是Blade模板语法和JavaScript的执行时机完全不匹配：

• Blade的{{ asset() }}是服务器端渲染的代码，页面加载时服务器就会把这个表达式转换成对应的URL字符串；而你的photo是客户端JavaScript变量，服务器根本不知道它的存在，所以会把"+photo+"当成固定字符串直接拼进路径里，最终生成的错误URL就是你看到的http://localhost:8000/profile-photos/"+photo+"，这肯定找不到图片嘛。

解决方法很简单，把服务器端渲染的基础路径和客户端变量分开处理就行，两种写法都可以：

方法一：先获取基础路径再拼接 #

// 让Blade先渲染出profile-photos目录的基础URL
var basePhotoUrl = "{{ asset('profile-photos/') }}";
var photo = data.user.photo;
// 再把客户端的文件名拼上去
$("#editThumbnail").attr("src", basePhotoUrl + photo);

方法二：用ES6模板字符串简洁拼接 #

如果你的项目支持ES6+语法，直接用模板字符串会更清爽：

var photo = data.user.photo;
$("#editThumbnail").attr("src", `${{ asset('profile-photos/') }}${photo}`);

这样当photo是marc.jpg时，最终生成的src就是正确的http://localhost:8000/profile-photos/marc.jpg啦。

另外别忘了检查一下：Laravel项目的public文件夹下确实存在profile-photos目录，而且marc.jpg文件也在里面，不然即使路径对了还是会404哦。

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