如何在.twig文件中显示通过.theme文件上传的图片

嘿，我看到你已经在主题设置里加了managed_file字段用于上传次要页脚logo，但直接在Twig里用{{ third_logo }}是显示不出来的——因为这个变量存的是文件ID（fid），不是浏览器能识别的图片URL。下面是完整的解决步骤：

第一步：在.theme文件中添加预处理函数，将文件ID转换为URL #

我们需要通过主题的预处理函数，把存储的文件ID加载成文件实体，生成可访问的URL后再传递给Twig模板。

打开你的主题.theme文件，添加以下代码（记得把YOUR_THEME_NAME替换成你的实际主题名称）：

function YOUR_THEME_NAME_preprocess_page(&$variables) {
    // 从主题设置中获取保存的文件ID
    $third_logo_fid = theme_get_setting('third_logo');
    
    if (!empty($third_logo_fid)) {
        // 根据ID加载文件实体
        $file = \Drupal\file\Entity\File::load($third_logo_fid);
        
        if ($file) {
            // 生成文件的绝对访问URL
            $variables['third_logo_url'] = file_create_url($file->getFileUri());
            // 如果你需要相对URL，可以用这个：
            // $variables['third_logo_url'] = $file->createFileUrl();
        }
    }
}

额外优化：确保文件不会被自动删除 #

Drupal的临时文件会被垃圾回收机制清理，所以我们要把上传的logo标记为永久文件。可以在主题设置表单的提交函数里添加这段代码：

function YOUR_THEME_NAME_system_theme_settings_submit(&$form, \Drupal\Core\Form\FormStateInterface $form_state) {
    $third_logo_fid = $form_state->getValue('third_logo');
    
    if (!empty($third_logo_fid)) {
        $file = \Drupal\file\Entity\File::load($third_logo_fid);
        if ($file) {
            // 设置文件为永久状态
            $file->setPermanent();
            $file->save();
        }
    }
}

第二步：在Twig模板中使用生成的URL #

现在你可以在Twig文件里用新的third_logo_url变量来显示图片了，记得加上判断避免输出空的img标签：

{% if third_logo_url %}
    <img src="{{ third_logo_url }}" alt="Footer Secondary logo" title="Footer Secondary logo">
{% endif %}

这样设置后，当你在主题设置里上传并保存logo，Twig就能正确渲染出图片啦！

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