Nuxt 2.15, how to display an image from a json in a component?

Question

Here I am on a project with Nuxt3 javascript and not type script. Nuxt 3 that I discovered as the project progressed, therefore a beginner.

My json package:

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/pwa": "^3.3.5",
    "bootstrap": "^4.6.2",
    "bootstrap-vue": "^2.22.0",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@nuxtjs/eslint-config": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "@nuxtjs/style-resources": "^1.2.1",
    "eslint": "^8.24.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.5.1",
    "fibers": "^5.0.3",
    "node-sass": "^8.0.0",
    "prettier": "^2.7.1",
    "sass-loader": "^10.4.1"
  }
}

Project structure: Project structure

Parent file (PagesProject.vue):

<script setup>

import { ref } from 'vue';
import data from '../data/dataProjects.json'

const projects = ref(data)
console.log(data)
</script>

<template lang="">
  
    <div class="structure__pagesProject">
      
        <div v-for="project in projects" :key="project.id" v-bind="project" > 
          <PortfolioThemProjects :project="project" /> 
        </div>
      
    </div>
 
</template>

Child file: (ThemProject):

<script setup>
import { ref } from 'vue';

const props = defineProps(['project'])

const img = ref(props.__ob__.value.project.urlImg)
console.log(img.value)

</script>

<template>

  <!-- Project start -->

    <!-- Structure de la card: -->
    <div class="card__structureThemProjects">

      <!--  Structure content (image et overlay): -->
      <div class="card__content">
      
        <!-- Image: -->
        <img
        class="card__img" 
        :src= project.urlImg
        alt="" 
        srcset="" 
        >

        <!-- Overlay: -->
        <div class="card__overlay">

          <!-- Structure icones sur overlay: -->
          <ul class="card__overlay--icone">

            <!-- Lien project -->
            <li>
              <!-- lien description project -->
<!--              <NuxtLink :to="project.linkProject">
                <i class="fa-solid fa-circle-info"></i>
              </NuxtLink >
-->
            </li>

            <!-- Lien project -->
            <li>
              <!-- Lien affiche project -->
              <a :href="project.urlProject">
                <i class="fa-solid fa-display"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Structure description -->
      <div class="card__description">
        <!-- Titre description -->
        <h3 class="card__description--title">
          {{ project.name }}
        </h3>
      </div>

    </div>

  <!-- project end -->
</template>

Json (DataProjects.json):

[
  {
    "id": "1",
    "name": "Réservia",
    "class": "reservia",
    "urlImg": "../assets/images/Projet_Oc_Reservia_Developpeur-Web.png",
    "linkProject": "../ProjectsReservia.vue",
    "urlProject": "https://cyrille57.github.io/oc-2-reservia/"
  }
]

Problems: After several tries, change of approach, syntax, verification, repeatedly, of the relative path, nothing allows displaying
the image in ThemProject.vue file has the line:

<!-- Image: -->
        <img
        class="card__img" 
        :src= project.urlImg
        alt="" 
        srcset="" 
        >

I put the same images in the public and assets folder, in order to try because I saw here and there what was needed going through one or the other for various reasons but trying the relative path of the two doesn't still does not work.

But if I hard code like:

<img src= "../assets/images/Project_Oc_Reservia_Developer-Web.png"/>

Where:

img src= "../public/images/Project_Oc_Reservia_Developer-Web.png"

works

After maybe I complicate my life or have a bad approach and there is something simpler, but not being an expert I prefer to do with what I understand to date.

Are you sure about this `"nuxt": "^2.15.8"` (`script setup` is Composition API hence Vue3/Nuxt3)? Are you using Vite or Webpack? Do you want your images to be in `public` or `assets`? Or I would say, why some of them are in `public`? — kissu, Dec 15 '22 at 16:39
@kissu Hello, indeed the version is not the right one, I was convinced to have installed version 3. I use vite. I prefer in the assets folder, the images are in public and assets, because as explained above I had read here and there different things on the subject and served as a test. — Cyril, Dec 15 '22 at 18:04
If you're using Vite, give a try to that one: https://stackoverflow.com/a/71514878/8816585 (the last part of the answer) It's more tricky than with Webpack, but should still work. And import the images from `assets`. — kissu, Dec 15 '22 at 18:09

score 0 · Answer 1 · edited Dec 16 '22 at 14:44

It's good after several searches, I finally found it! In terminal to add '@nuxt/image' to devDependency.

In nuxt.config add to buildModules: '@nuxt/image' then add: image: { dir: 'assets/images' }, then in ThemProjects:

<script setup>
import { ref } from 'vue';
const props = defineProps(['project'])

const pathImg = ref(props.__ob__.value.project.urlImg) 
console.log(pathImg.value)

</script>

<template>

  <!-- Project start -->

    <!-- Structure de la card: -->
    <div class="card__structureThemProjects">

      <!--  Structure content (image et overlay): -->
      <div class="card__content">
      
        <!-- Image: -->
        <nuxt-img
        class="card__img"
        :src= "pathImg"
         />
</template>

Json:

[
  {
    "id": "1",
    "name": "Réservia",
    "class": "reservia",
    "urlImg": "Projet_Oc_Reservia_Developpeur-Web.png",
    "linkProject": "../ProjectsReservia.vue",
    "urlProject": "https://cyrille57.github.io/oc-2-reservia/"
  }
]

See if that can help! Thanks for pointing me out @kissu

Nuxt 2.15, how to display an image from a json in a component?

1 Answers1