Image-path is probably not translated correctly

JavaScript
1

I have a problem that I did not find out after doing research.

I have a VUE3 project which reads data from a local JSON file via AXIOS.
I know that I can import a JSON-file without Axios, but in this case, it should work with Axios.

This is the Portfolio.vue Component:

<template>
  <div class="px-8 pt-10 md:px-10 md:pt-16 xl:pl-40 xl:pr-56">
    <PortfolioCard
      v-for="project in projects"
      :key="project.id"
      :project="project"
   
    />
  </div>
  <TheFooter />
</template>

<script>
import axios from 'axios';
import PortfolioCard from './PortfolioCard.vue'
import TheFooter from './TheFooter.vue'

export default {
  name: 'Portfolio',
  components: {
    PortfolioCard,
    TheFooter
  },
  
  data() {
    return {
     projects: []
    }
  },
  created() {
    axios.get('data.json')
      .then(response => {
        this.projects = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

The JSON file refers to images in my assets folder. This image-path is probably not translated correctly by Webpack.

[
    {
      "id": 1, 
      "title": "Manage", 
      "stack": "HTML / CSS / JS",
      "category": "Interaction Design / Front End Development",

      "description": "This project required me to build a fully responsive landing page to the designs provided. I used HTML5, along with CSS Grid and JavaScript for the areas that required interactivity, such as the testimonial slider.",
      "background": "This project was a front-end  challenge from Frontend Mentor. It’s a platform that enables you to practice building websites to a design and project brief. Each challenge includes mobile and desktop designs to show how the website should look at different screen sizes. Creating these projects has helped me refine my workflow and solve real-world coding problems. I’ve learned something new with each project, helping me to improve and adapt my style.",

      "mobileImg": "../assets/images/portfolio/mobile/image-portfolio-manage@2x.jpg", 
      "tabletImg": "../assets/images/portfolio/tablet/image-portfolio-manage@2x.jpg",
      "desktopImg": "../assets/images/portfolio/desktop/image-portfolio-manage@2x.jpg",

      "mobileHero": "../assets/images/detail/mobile/image-manage-hero@2x.jpg",

      "mobilePreview1": "../assets/images/detail/mobile/image-manage-preview-1@2x.jpg",
      "mobilePreview2": "../assets/images/detail/mobile/image-manage-preview-2@2x.jpg",
    
      "tabletPreview1": "../assets/images/detail/tablet/image-manage-preview-1@2x.jpg",
      "tabletPreview2": "../assets/images/detail/tablet/image-manage-preview-2@2x.jpg",

      "desktopPreview1": "../assets/images/detail/desktop/image-manage-preview-1@2x.jpg",
      "desktopPreview2": "../assets/images/detail/desktop/image-manage-preview-2@2x.jpg"
    } [...]
]

In a pre-version of my „Portfolio“ component, it worked with the require keyword. This could be the answer, but I don‘t know how to use require in this new case.

<template>
  <div class="px-8 pt-10 md:px-10 md:pt-16 xl:pl-40 xl:pr-56">
    <PortfolioCard
      v-for="project in projects"
      :key="project.id"
      :project="project"
   
    />
  </div>
  <TheFooter />
</template>

<script>
import PortfolioCard from './PortfolioCard.vue'
import TheFooter from './TheFooter.vue'

export default {
  name: 'Portfolio',
  components: {
    PortfolioCard,
    TheFooter
  },
  
  data() {
    return {
      projects: [
        {
          id: 1,
          title: 'Manage',

          mobileImg: require('../assets/images/portfolio/mobile/image-portfolio-manage@2x.jpg'),
          tabletImg: require('../assets/images/portfolio/tablet/image-portfolio-manage@2x.jpg'),
          desktopImg: require('../assets/images/portfolio/desktop/image-portfolio-manage@2x.jpg'),
          mobileHero: require('../assets/images/detail/mobile/image-manage-hero@2x.jpg'),
          mobilePreview1: require('../assets/images/detail/mobile/image-manage-preview-1@2x.jpg'),
          mobilePreview2: require('../assets/images/detail/mobile/image-manage-preview-2@2x.jpg'),

          tabletPreview1: require('../assets/images/detail/tablet/image-manage-preview-1@2x.jpg'),
          tabletPreview2: require('../assets/images/detail/tablet/image-manage-preview-2@2x.jpg'),

          desktopPreview1: require('../assets/images/detail/desktop/image-manage-preview-1@2x.jpg'),
          desktopPreview2: require('../assets/images/detail/desktop/image-manage-preview-2@2x.jpg'),
[...]

Greetings from Germany,
Andreas

2

I got the solution:

In JSON I only used the name of the images as a source:

    "mobileImg":  "mobile-portfolio-manage.jpg", 
      "tabletImg": "tablet-portfolio-manage.jpg",
      "desktopImg": "desktop-portfolio-manage.jpg",

In my component I used the following syntax:

    <img  :src="require(`../assets/portfolio/${project.mobileImg}`)" />

This took me only about 48h.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.