Rendering of local images in <v-carousel-item> not working but online image links are working

react local images
webpack images
react image
image not rendering react
react dynamic image src
react require image
react array of images
import image react

I am new to vuejs and vuetify, I am trying to create a simple carousel component in a sample app created using the vue cli 3. I am able to get the carousel content but its not loading the local images present in the asset folder, but the sample images in the vuetify page containing an online link of the image is working.

<template>
<div> 
<v-carousel>
  <v-carousel-item v-for="i in 4" :key="i">
     <v-img contain :src="items[i]"></v-img>
  </v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
data() {
    items: [
        '../assets/img/PreviousYear/17/top10/2.PNG',
        '../assets/img/PreviousYear/17/top10/1.PNG',
        "https://cdn.vuetifyjs.com/images/carousel/bird.jpg",
        "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
      ]
  }
}
</script>

The images 1.PNG and 2.PNG is not working but the other two are. Can someone help me on this, what I am missing.

"Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require. If you're using Vuetify as a Vue-CLI 3 plugin, you can edit your project's vue.config.js file by modifying the options for vue-loader." from Vuetify

// Incorrect
<v-img src="../path/to/img" />

 // Correct
 <v-img :src="require('../path/to/img')" />

So, I would change your items array to this format:

items: [
    {
      src: require('../assets/img/PreviousYear/17/top10/2.PNG')
    },
    {
      src: require('../assets/img/PreviousYear/17/top10/1.PNG')
    },
    {
      src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
    },
    {
      src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
    }
  ]

And your html like this:

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
  ></v-carousel-item>
</v-carousel>

Hope it helps. :)

Rendering Local Images with React and Webpack, In the case of being able to render local images in your web application, rather than having to rely on web addresses of images, you will need� Rendering images can require a lot of memory, mainly because Grafana creates browser instances in the background for the actual rendering. If multiple images are rendered in parallel, then the rendering has a bigger memory footprint. One advantage of using the remote rendering service is that the rendering will be done on the remote system, so your local system resources will not be affected by rendering. Alerting and render limits

I think the problem is in your v-for. Try to change it to this :

<v-carousel>
  <v-carousel-item v-for="item in items">
     <v-img contain :src="item"></v-img>
  </v-carousel-item>
</v-carousel>

As your items array only contains urls, you can loop through each item to use the value.

If it doesn't solve your problem, maybe your local url's aren't corrects and you have to verify your project tree to solve it.

Not rendering local images � Issue #1306 � react-native-community , Thank you for your time and energy for maintaining this open source project. I expected easy local file support like react-native-svg-uri so I� Rendering or image synthesis is the process of generating a photorealistic or non-photorealistic image from a 2D or 3D model by means of a computer program. [citation needed] The resulting image is referred to as the render. Multiple models can be defined in a scene file containing objects in a strictly defined language or data structure.

I had a similar problem in my project. Try importing local files like this:

<script>
    var file1 = require('yourpath')
    var file2 = require('yourpath')

    export default {
    data() {
        items: [
            file1,
            file2,
            "onlineimage",
            "onlineimage"
          ]
      }
    }
</script>

This solved my problem. If it still doesn't work, check the path, you might need "./" or "@/" instead of "../".

Also, use array length for your v-for instead of a fixed number. Like this:

<v-carousel-item v-for="item in items" :src="item">
</v-carousel-item>

Or like this:

<v-carousel-item v-for="(item, i) in items" :key="i" :src="item">
</v-carousel-item>

Result is the same.

Rendering local images in markdown � Issue #16 � voila-dashboards , At the moment, images in relative directories w.r.t. notebooks are not rendered. Serving these directories would break the security model of� For this reason, rendering companies may be able to charge a flat rate for all these styles of renders. Scalable per image pricing - Often, the cost to render 1 image is slightly higher per image than if you choose to purchase multiple images. The reason for this is the initial setup for 1 rendering can be quite intensive.

I'm using Laravel, vuetify and this worked for me:

"vuetify": "^1.5.1",

webpack.mix.js

mix
  .js('resources/assets/js/app.js', 'public/js')
  .copyDirectory('resources/assets/img', 'public/img')

welcome.vue

 <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i"></v-carousel-item>
  </v-carousel>
</template>

<script>

export default {
  name: 'welcome-view',
  layout: 'default',

  metaInfo () {
    return { title: this.$t('home') }
  },
  data () {
   return {
     items: [
       {
         src: '/img/PreviousYear/17/top10/2.PNG'
       },
       {
         src: '/img/PreviousYear/17/top10/1.PNG'
       },
       {
         src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
       },
       {
         src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
       }
     ]
   }
 }
}
</script>

where resources/assets/img/PreviousYear/17/top10/2.PNG

(PDF) A local image reconstruction algorithm for stochastic rendering, We achieve good quality images with only 16 samples per pixel, making the algorithm potentially practical for interactive stochastic rendering in the near future. I actually have a similar issue, my image is been imported in the index.jsx file, I have the loaders in webpack, the compile face is working fine, as indeed a copy of the image is been created in my server/public/js folder with a random number, and the correct path to it is in the bundler, but I can't visualize the image.

A review on image-based rendering, Image-based rendering is important both in the field of computer graphics and To solve this problem, people combine both global and local alignment, which� Rendering or image synthesis is the automatic process of generating a photorealistic or non-photorealistic image from a 2D or 3D model (or models in what collectively could be called a scene file) by means of computer programs. Also, the results of displaying such a model can be called a rendering.

react-image, React Image is an tag replacement for react, featuring preloader and the code locally in ES6, CommonJS, or UMD format, install react-image using npm: in < Suspense> to keep it from rendering until the image is ready. Find images of Rendered. Free for commercial use No attribution required High quality images. 3d rendering render design pool. 4,771 Free images of Rendered. 674

Adding Images, Fonts, and Files, With webpack, using static assets like images and fonts works and tells Create React App that you want a React component that renders an� 4,521 Free images of Rendering. 586 525 94. Earth Planet World. 228 230 51. Skyscraper Skyscrapers. 343 335 46. Anatomical Anatomy Body. 236 230 28. Cello Strings

Comments
  • you save my life dude!
  • I'm not a dude. Happy to help :))
  • Thanks for your suggestion but in my case it is showing error : error in ./src/assets/img/PreviousYear/17/top10/1.PNG Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)
  • @SoorajKumar Ah yes, now I remember! I had a '.JPG' file, in uppercase, and got the same error. Changing file format to '.jpg', in lowercase, worked for me. I suggest using a program to change it though (I used GIMP), cause I once tried to force change it in Windows and Vue apparently didn't like that.