Django - display image from static folder in accordance to values from DB

I have a Django app which has a model that holds cities, counties and countries codes:

models.py

class AreaMap(models.Model):
    Code = models.AutoField(primary_key=True)
    fCityCode = models.CharField(
        verbose_name='City', max_length=100)
    fCountyCode = models.CharField(
        verbose_name='County', max_length=100)
    fCountryCode = models.CharField(
        verbose_name='Country', max_length=100)

    def __str__(self):
        return self.fCityCode

For each city, I have some static images in my static folder which are not going to be changed (or at least, if required, the old file would be overwritten with a new one but keeping the same filename). The correspondence between the image and the value from the database is by field 'fCityCode`:

Example:

For New York - in the database is saved as 'NewYork' and the image filename from my static folder is the same, 'NewYork'.

Now, I would like to display in my HTML template every image from the folder that corresponds to a value from the database.

I've done some research and I read that when it comes to static images is better to import them from the static folder rather than storing the images in the database which makes sense. Is there any way of doing this mapping and achieving this using Django? Thanks

Later edit

So, my settings.py looks as below:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

My urls.py looks as below:

urlpatterns = [
        #other urls
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

The model above have been modified according to foo-bar answer and added the @property constructor:

class AreaMap(models.Model):
    Code = models.AutoField(primary_key=True)
    fCityCode = models.CharField(
        verbose_name='City', max_length=100)
    fCountyCode = models.CharField(
        verbose_name='County', max_length=100)
    fCountryCode = models.CharField(
        verbose_name='Country', max_length=100, default='RO')

    @property
    def img_url(self):
        return "{}{}".format(settings.MEDIA_URL, self.fCityCode)

Using inspect option from the browser, this is how the URL of the photo looks like but somehow it is not displayed in the browser:

<a href="/path/" class="card img-card fh-400 border-0 outer-bg" data-background-inner="/media/NewYork.jpg">
<div class="inner-bg overlay-dark" style="background-image:url("/media/NewYork.jpg");">
</div>

You are almost there !!
According to your settings, your directory structure should be like this,

.
├── project_root
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── media
│   └── foo
└── myapp_name
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── migrations
    │   ├── 0001_initial.py
    │   └── __init__.py
    ├── models.py
    ├── templates
    │   └── sample.html
    ├── urls.py
    └── views.py

Key Point is the media directory should be placed in the root director

To render the images in your template, you need to pass the AreaMap queryset to the template through view.

#myapp_name/views.py
from django.shortcuts import render


def sample_view(request):
    return render(request, 'sample.html', context={'qs': AreaMap.objects.all()})

and now iterate (or whatever you want to do in your template) the Queryset in the template as,

#myapp_name/templates/sample.html

{% for item in qs %}
    <p><img src="{{ item.img_url }}" width="300px"></p>
{% endfor %}

As this files are fixed and won't be changed frequently, I think they should be stored in static directory. Now if the folder structure is like this:

.
├── project_root
├── static
│   ├── city_images
│      ├── LA.jpg
│      ├── NewYork.jpg
│      └── Washington.jpg
├── apps

Then your settings should be like this:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]
STATIC_URL = '/static/'

Then simply use:

{% load static %}
<div class="inner-bg overlay-dark" style="background-image:url({% static 'city_images/NewYork.jpg' %};);">

Or you can integrate with your model like mentioned in your edit:

# model

from django.templatetags.static import static

class AreaMap(models.Model):
    Code = models.AutoField(primary_key=True)
    fCityCode = models.CharField(
        verbose_name='City', max_length=100)
    fCountyCode = models.CharField(
        verbose_name='County', max_length=100)
    fCountryCode = models.CharField(
        verbose_name='Country', max_length=100, default='RO')

    @property
    def img_url(self):
        return static("city_images/{}".format(self.fCityCode))

# view

{% for i in areamap_objects %}
   <img src="{{ i.img_url }}" >
{% endfor %}