I am trying to make a simple website that displays a list of fundraisers from a database with a picture for each fundraiser. However, I can't figure out why the images aren't appearing. My fundraiser model is as follows:

```
class Fundraiser(models.Model):
    fundraiserImage = models.ImageField(upload_to='images/', blank=True)

```

I tried to display each fundraiser in the database as shown in the vue file below.

```
template>
  <div>
    <div>
      <ul>
        <li v-for="f of fundraisers" v-bind:key="f.id">
          <img src="f.fundraiser.fundraiserImage.url" width="500">
        </li>
      </ul>
      {{fundraisers}}
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Fundraiser',
  data () {
    return {
      fundraisers: []
    }
  },
  mounted: function () {
    this.getFundraisers()
  },
  methods: {
    getFundraisers: function () {
      // var app = this;
      axios.get('/api/fundraisers/?format=json')
        .then(response => (this.fundraisers = response.data))
    }
  }
}
</script>
<style>
</style>

```

Here's a snippet of the relevant code from my settings.py file:

```
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '../frontend/dist/static/')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

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

```

and here's a snippet of the relevant code from my urls.py file:

```
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

```