🖼️ Image URL Configuration

Setup Guide for Email Image Hosting

📋 The Problem

Email clients require absolute URLs for images (e.g., https://example.com/logo.png), not relative paths (e.g., logo.png).

⚠️ Current Issue: Your templates use relative paths like src="logo.png". These work in a browser but fail in email clients because the images aren't accessible from the recipient's email server.

✅ Solution Options

Option 1: Host on Your Website (RECOMMENDED)

Upload images to your ARK G.K. website at https://www.arkgk.co.jp/email-assets/

Pros: Professional, your own domain, full control

Setup:

  1. Create folder: /email-assets/ on www.arkgk.co.jp
  2. Upload: logo.png, property1.jpg, property2.jpg, property3.jpg, placeholder.jpg
  3. Edit config.php and set: 'base_url' => 'https://www.arkgk.co.jp/email-assets'

Option 2: Use CDN (Cloudflare, AWS S3, etc.)

Upload images to a CDN for fast, reliable delivery

Pros: Fast loading, high availability, global delivery

Setup:

  1. Create CDN bucket/storage
  2. Upload all email images
  3. Get public URL (e.g., https://cdn.example.com/ark-emails/)
  4. Update config.php with CDN URL

Option 3: GitHub Pages (Free, Good for Testing)

Use GitHub to host images for free

Pros: Free, version control, easy updates

Setup:

  1. Push this repo to GitHub
  2. Enable GitHub Pages in repo settings
  3. Images will be at: https://clickmark.github.io/ark-email-templates/
  4. Update config.php with GitHub Pages URL

⚙️ Configuration Steps

Step 1: Edit config.php

Open config.php and update the base_url:

return [
    // Update this URL to where your images are hosted
    'base_url' => 'https://www.arkgk.co.jp/email-assets',
    
    // ... rest of config ...
];

Step 2: Upload Images

Upload these files to your hosting location:

  • logo.png (6.3 KB)
  • property1.jpg (219 KB)
  • property2.jpg (173 KB)
  • property3.jpg (263 KB)
  • placeholder.jpg (2.2 KB)

Step 3: Test Image URLs

After uploading, verify each image is accessible by visiting the URLs in your browser:

https://www.arkgk.co.jp/email-assets/logo.png
https://www.arkgk.co.jp/email-assets/property1.jpg
https://www.arkgk.co.jp/email-assets/property2.jpg
https://www.arkgk.co.jp/email-assets/property3.jpg
https://www.arkgk.co.jp/email-assets/placeholder.jpg
💡 Tip: The system will automatically replace all relative image paths with your configured absolute URLs when sending emails.

🧪 Testing

Current Configuration

Base URL: https://www.arkgk.co.jp/email-assets

Test Image Loading

These images should load if your configuration is correct:

Logo

https://www.arkgk.co.jp/email-assets/logo.png

Logo

Property 1

https://www.arkgk.co.jp/email-assets/property1.jpg

Property 1
✅ Ready to test? Once images load correctly above, send a test email to verify images appear in the actual email.
Go to Email Tester →

🔧 Troubleshooting

Images don't load in test above

  • Check config.php has correct base_url
  • Verify images are uploaded to the hosting location
  • Test each image URL directly in browser
  • Check file permissions (images should be publicly readable)
  • Ensure no typos in URLs or filenames

Images load in test but not in emails

  • Some email clients block images by default (user must click "Load Images")
  • Check email client's image blocking settings
  • Verify sender authentication (SPF, DKIM, DMARC) to avoid being marked as spam
  • Use a different email provider to test

SendGrid Authentication Setup

To improve deliverability and ensure images load:

  1. Go to SendGrid Dashboard → Settings → Sender Authentication
  2. Authenticate your domain (www.arkgk.co.jp)
  3. Set up SPF and DKIM records in your DNS
  4. Configure DMARC policy
  5. Verify sender email address (info@arkgk.co.jp)