使用Express+Pug开发产品页时JSON内图片链接无法加载问题

你当前的Pug模板仅将img_url字段作为普通文本输出，没有将其渲染为HTML图片标签，所以页面只会展示图片链接文本，不会加载显示图片。

修改Pug模板代码 #

将模板中原有的p=product.img_url行，替换为Pug格式的图片标签写法即可，你也可以自行添加样式控制图片展示尺寸，修改后的完整模板代码如下：

extends layout

block content 
        each product in data 
            p=product.name 
            p=product.price
            p=product.model 
            img(src=product.img_url, alt=product.name, style="max-width: 400px; margin: 10px 0;")

            p 
            a.btnOrder(href='/orders') Make an order!!!

如果修改后图片仍无法加载，大概率是目标图片服务器设置了防盗链限制，你可以将所有产品图片下载到项目的public/images目录下，再将JSON文件中对应的img_url字段值改为相对路径，比如/images/jetpack-pitus.png，你已经在index.js中配置了public目录为静态资源目录，直接使用相对路径即可正常访问本地存储的图片资源。

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