1

I am using Vue and my image paths are not working. I have tried these different variations:

<figure class="workout-image">
            <img :src= "images.bicep" width= "200px" length= "300px">
            <figcaption>Bicep Curl</figcaption>
          </figure>
        
         <figure class="workout-image">
            <img :src= "'https://thumbs.dreamstime.com/z/bench-press-exercise-chest-man-doing-workout-bench-press-exercise-chest-man-doing-workout-barbell-bodybuilder-157558597.jpg'" width= "200px" length= "300px">
            <figcaption>Bench Press</figcaption>
          </figure>

          <figure class="workout-image">
            <img v-bind:src= "'../assets/images/workouts/TricepExtension.png'" width= "200px" length= "300px">
            <figcaption>Tricep Extension</figcaption>
          </figure>

I have my images in my src/assets folder and the full path is src/assets/images/workouts. I always get a little icon not displaying the image. image not showing up

edit: I do not put anything in the tag

1 Answers1

0

Assuming you have your assets folder in your src folder, vue-loader should load them in for you, and you can access them using @/assets/rest/of/path.

<figure class="workout-image">
    <img src="@/assets/images/workouts/TricepExtension.png" width= "200px" length= "300px">
    <figcaption>Bicep Curl</figcaption>
</figure>

See this section about vue asset url handling

Matt
  • 251
  • 1
  • 5
  • The image still does not show up. –  Nov 28 '21 at 04:45
  • Does your webpack file have a `resolve` section like you see in the picture in this question? (Check the top answer) https://stackoverflow.com/questions/42749973/what-does-the-mean-inside-an-import-path – Matt Nov 28 '21 at 05:59