如何检索用于VUE文件中的图像？

Question

我一直在创建一个投资组合网站，通常在使用NUXT时，我有一个资产文件夹，这次我没有一个。

因此，我手动创建了一个并将图像添加到其中，但是，我无法检索用于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  

以下是我的“以前的work.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"
  }
}

以下是用于此站点的文件结构。 使用中的文件结构

Answer 1

首先，您不必将图像导入/Assets 包含您未编译的资产，例如手写笔或SASS文件，图像或字体。在VUE模板内部，如果您需要链接到资产目录〜/Assets/ethereum.jpg ，则使用斜杠。

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

在CSS文件中，如果您需要引用资产目录，请使用 〜Assets/your_image.png （无斜杠） ，

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

在使用NUXT时，建议将图像文件/static 。静态目录直接映射到服务器root（），并包含可能不会更改的文件。所有随附的文件将由NUXT自动提供，并可以通过您的项目根网址访问。

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

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

Answer 2

如，问题主要是文件名的错字， Etheruem 而不是以太坊。解决了问题。