如何检索图像以在 vue 文件中使用？

Question

我一直在做作品集网站，平时用Nuxt的时候都有assets文件夹，这次没有。

因此，我手动创建了一个并将我的图像添加到其中，但是，我无法检索图像以用于我的 vue 文件。

但是，我收到以下错误：

 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

下面是在我的“previousWork.vue”文件中找到的代码。

<template>
<div class="bg-black h-screen px-6 py-12">
    <h2 class="text-white font-exo text-5xl ">
        PREVIOUS WORK
    </h2>
    <div class="flex space-x-2">
        <div v-for="project in projects">
         <img :src="project.image.url" alt="" style="height: 70vh;" class="object-cover">
         <p class="font-space-mono text-white text-sm">{{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>

下面是在我的“package.json”文件中找到的代码。（依赖关系等）

{
  "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"
  }
}

以下是本网站使用的文件结构。 File Structure in use

Answer 1

首先，您不必导入图像，因为 /assets 包含您的 un-compiled 资源，例如 Stylus 或 SASS 文件、图像或字体。在你的 vue 模板中，如果你需要 link 到你的资产目录，请在资产前使用 ~/assets/ethereum.jpg 和斜杠。

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

在您的 css 文件中，如果您需要引用您的资产目录，请使用 ~assets/your_image.png （没有斜杠）

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

由于您正在使用 Nuxt，我建议将图像文件放在 /static 中。静态目录直接映射到服务器根目录 () 并包含可能不会更改的文件。所有包含的文件都将由 Nuxt 自动提供，并且可以通过您的项目根目录访问 URL.

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

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

Answer 2

如中所述，问题主要是文件名中的拼写错误，etheruem 而不是 ethereum。这解决了问题。

如何检索图像以在 vue 文件中使用？

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

three.js

vue.js

nuxt.js