How do I retrieve an image for use in a vue file?-CodePudding

I have been making a portfolio website, usually when using Nuxt I have an assets folder, this time I did not have one.

Therefore, I created one manually and added my images into it, however, I cannot retrieve the images for use on my vue file.

However, I get the error below:

 ERROR  Failed to compile with 1 errors 

 This dependency was not found:  

 * ~/assets/ethereum.jpg in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/previousWork.vue?vue&type=script&lang=js&

 To install it, you can run: npm install --save ~/assets/ethereum.jpg

Below is the code found in my "previousWork.vue" file.

<template>
<div >
    <h2 >
        PREVIOUS WORK
    </h2>
    <div >
        <div v-for="project in projects">
         <img :src="project.image.url" alt="" style="height: 70vh;" >
         <p >{{project.title}}</p>
        </div>
    </div>
</div>
</template>

<script>
import ethereumImg from '~/assets/ethereum.jpg'
export default {
    data() {
        return {
            projects: [
                {
                    image: {
                        url: ethereumImg
                        },
                        title: 'ETHEREUM CARBON CALCULATOR'
                }
            ]
        }
    }
}
</script>

Below is the code found in my "package.json" file. (dependencies etc)

{
  "name": "my-portfolio-nuxt",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "core-js": "^3.19.3",
    "dat.gui": "0.7.7",
    "gsap": "3.6.0",
    "nuxt": "^2.15.8",
    "orbit-controls-es6": "^2.0.1",
    "three": "^0.126.1",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxtjs/google-fonts": "^1.3.0",
    "@nuxtjs/tailwindcss": "^4.2.1",
    "postcss": "^8.4.4"
  }
}

Below is the file structure used for this site. File Structure in use

CodePudding user response：

Firstly you don't have to import the image as /assets contains your un-compiled assets such as Stylus or SASS files, images, or fonts. Inside your vue templates, if you need to link to your assets directory use ~/assets/ethereum.jpg with a slash before assets.

<template>
  <img src="~/assets/ethereum.jpg" />
</template>

Inside your css files, if you need to reference your assets directory, use ~assets/your_image.png (without a slash)

background: url('~assets/ethereum.jpg');

As you are using Nuxt I would suggest putting the image files inside /static. The static directory is directly mapped to the server root () and contains files that likely won't be changed. All included files will be automatically served by Nuxt and are accessible through your project root URL.

<!-- Static image from static directory -->
<img src="/ethereum.jpg" />

<!-- webpacked image from assets directory -->
<img src="~/assets/ethereum.jpg" />

CodePudding user response：

As mentioned in this comment by Estus Flask, the issue was mainly a typo in the name of the file, etheruem rather than ethereum. That fixed the issue.