Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – v-for dynamic images src

In resources/images directory i have 10 images that i want to show through vue3-carousel library, the images names are 1.jfif, 2.jfif..etc, but the attribute binding doesn’t work like this, it gives error : Property assignment expected.:

        <Slide v-for="slide in 10" :key="slide">
            <div class="carousel__item">
                <img :src="../../images/{{slide}}.jfif" width="500" />
            </div>
        </Slide>

i also tried like this, using template string:

<img :src="`../../images/${slide}.jfif`" width="500" />

but it will then look for images in the public directory instead, it give me errors like /images/2.jfif:1 GET http://localhost/images/2.jfif 404 (Not Found)

how can i solve that issue? thanks

Tags:

3

Answers


  1. 0

    You could incode your images in Base64, then you can use it on the bind.

    This website will do it for you: https://www.base64-image.de/.

    Just upload your images there, click show code and copy whats underneath For use in <img> elements:.

    Since the base64 encoding is very big, I’d recommend you store in a separated file to keep your code organized.

    Example:
    images.js

    const image1 = 'data:image/png;base64...';
const image2 = 'data:image/png;base64...';
const images = [image1, image2];
export default images;

    Then, you import and use it on the bind accordingly.

    <Slide v-for="image in images" :key="image">
    <div class="carousel__item">
        <img :src="image" width="500" />
    </div>
</Slide>
    Login or Signup to reply.
  2. 0 
     hi to use dynamic images in lock

 // hosturl:'domain website' or 'path like /'

 <Slide v-for="(img, index) in imgaes"> 
 <div class="carousel__item">
 <img alt="img.alt" src="hosturl+'/media/img'+img.src" style="height:100%;width:100%;object-fit: cover;">    
  </div>
  </Slide>

 or 
 
 <Slide v-for="(item, index) in items"> 
  <div class="carousel__item">
  <img :alt="item.name" src="hosturl+'/path_media/'+item.img" style="height:100%;width:100%;object-fit: cover;">    
 </div>
 </Slide>

 --data on returen function exampel--
 
 imgaes: [
 {src: "up362R31381.jpg",alt:"1"},
 {src: "up1376R65296.jpg,alt:"2"),
 {src: "up1376R65296.jpg,alt:"3"),
 {src: "up1376R65296.jpg,alt:"4"),
 {src: "up1376R65296.jpg,alt:"5"),
 {src: "up1376R65296.jpg,alt:"6"),
 {src: "up1376R65296.jpg,alt:"7"),
 {src: "up1376R65296.jpg,alt:"8"),
 {src: "up1376R65296.jpg,alt:"9"),
 {src: "up1376R65296.jpg,alt:"10")
 ]

 or 

 imgaes: ['up1.jpg','up2.jpg=','up3.jpg','up4.jpg','up5.jpg','and_more.jpg']

 or
 hosturl:'link website', 
 items:[
 {name:"slide1",img:"up1.jpg"},
 {name:"slide2",img:"up1.jpg"},
 {name:"slide3",img:"up1.jpg"},
 {name:"slide4",img:"up1.jpg"},
 {name:"slide5",img:"up1.jpg"}
 ]
    Login or Signup to reply.
  3. 0

    you need to use require() function to reference local assets correctly

      <Slide v-for="slide in 10" :key="slide">
      <div class="carousel__item">
          <img :src="require(`@/resources/images/${slide}.jfif`)" width="500" />
      </div>
  </Slide>

    By wrapping the filepath inside require() Webpack which comes bundled with Laravel will handle loading the correct asset during build time.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search