Problem loading an image dynamically with Vue & Webpack

Question

I started building an application with the Vue CLI, and I have the following code snippet in a component:

<template>
  <div v-loading="loading">
    <el-carousel :interval="4000" type="card" height="350px">
      <el-carousel-item v-for="element in persons" :key="element.id">
            <div class="testimonial-persons">
                <el-avatar :size="80">
                    <img :src="require('@assets/testimonial/'+ element.photo)"> 
                </el-avatar>
                <h3>{{element.name}}</h3>
                <h4>{{element.occupation}}</h4>
                <hr style="width:50%;">
                <p>"{{element.comment}}"</p>
            </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

When the page is loaded I make a request for an API that returns an array of objects that I store in persons to iterate over the template.

Persons

[ 
    { 
        "testimonial_id": "2",
        "persons_id": "1",
        "id": "1", 
        "name": "Tom lima", 
        "occupation": "CEO / Pugmania",
        "comment": "Simply the best customer service and attention to detail.",
        "photo": "20200320193143R7pChVea3IkmujRRmS.png" 
    },

]

Everything works normally, the problem is with the image loading.

When I enter the image name manually it works.

  <img src="@assets/testimonial/20200320193143R7pChVea3IkmujRRmS.png">

Does anyone have any idea how to solve?

Dan · Accepted Answer · 2020-03-20 19:22:28Z

2

Your template is correct except that you're missing a / following the @. It should be:

<img :src="require('@/assets/testimonial/' + element.photo)">

This would be needed for the manual usage too, so maybe you left it out when you converted it to a dynamic path.

answered Mar 20, 2020 at 19:22

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Dan Over a year ago

That's an extremely confusing custom Webpack alias to not mention, because Vue-CLI uses @ as a default src alias. So this means you created the first alias, the @ alias, unnecessarily, since it already exists. Finally, the error message indicates that Webpack does not recognize your @assets alias when using require. I would not use @ in any custom aliases to avoid confusion.

Dan Over a year ago

Also, by using a custom assets folder outside of Vue-CLI's src assets, you are bypassing and missing out on Vue's asset bundling convenience. I guess the question is why are you doing it this way? I would suggest moving your assets into src/assets, remove your custom aliases, and use my answer syntax.

Tom Lima Over a year ago

Perfect @Dan thank you! I will follow your recommendations! is that I’m relatively new to vue and I haven’t yet managed to absorb all the documentation and best practices... I'm migrating a project using codeigniter and jquery and I tried to reuse the structure that I already had of the assets so I made this alias :) thanks again o/

Dan Over a year ago

You're welcome, it's a good effort. Let me know if you have any trouble or if it solves your issue. Also, if your assets was actually in the root like your src (i know you said it was above it), then this alias would have worked: '@assets': path.resolve(__dirname, 'assets/uploads/'). (But don't do it this way.)

Dan Over a year ago

I see. Frontend source folders are not really a good fit for this scenario. I think it's best to simply create: <img :src="'http://<myserver>/<path>/' + element.photo" />

|

Collectives™ on Stack Overflow

Problem loading an image dynamically with Vue & Webpack

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related