GrapesJS中block内图片无法显示及图片自定义CSS设置问询

相对路径图片无法加载的原因 #

核心原因是相对路径的解析基准和预期不符：
GrapesJS运行时会以浏览器地址栏当前的URL作为基准解析相对路径，不是以配置代码所在的JS文件位置为基准。如果你的编辑器部署在子路由、或者打包后静态资源路径发生变化，./assets/images/contact-us.png这种相对路径就会指向错误的地址，导致资源加载失败。HTTPS外链是绝对地址，不受当前页面路径影响，所以可以正常加载。 #

对应解决方法 #

• 方案1：改用根路径写法：把图片地址开头的./去掉，直接写成/assets/images/contact-us.png，路径会直接从站点根目录开始查找资源，不受当前子路由影响。
• 方案2：配置全局静态资源前缀：初始化GrapesJS时添加assetBaseUrl配置，填写你静态资源的统一根路径，后续所有块内的相对图片路径都会自动拼接该前缀加载：

const editor = grapesjs.init({
  // 其他原有配置
  assetBaseUrl: '你的静态资源根路径'
})

• 方案3：小体积图片转Base64编码直接写入src属性，完全规避路径依赖问题。

自定义CSS样式支持说明 #

完全支持给块内图片添加自定义CSS样式，两种常用实现方式：

1. 行内样式直接写：在图片标签的style属性中直接编写样式规则，示例如下：

<img src="./assets/images/contact-us.png" class="cus" alt="contact" style="width: 100px; border-radius: 4px;">

2. 类名+全局样式注入：你现有配置中已经给图片添加了cus类名，只需要在GrapesJS初始化时配置canvasCss参数，把对应类的样式规则注入到编辑器画布中即可生效：

const editor = grapesjs.init({
  // 其他原有配置
  canvasCss: `
    .cus {
      width: 120px;
      margin: 8px 0;
      border: 1px solid #e5e7eb;
    }
  `
})

你提供的配置代码参考 #

//contact page
{
    id:'contact',
    attributes: { class:'gjs-block-contact'},
    label: `<div>
                <img src="./assets/images/contact-us.png" class="cus" alt="contact" >  
            </div><br>
            `,
    category:'Pages',
    content: `
        <section class="col-mb-4">
            <div class="row">
                <div class="col-md-12 mb-md-0 mb-5">
                     <h1>Contact Us</h1>
                   
                </div>
            </div>
        </section>
`,
},

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