我认为这应该很简单，但是我在如何在 Vue 单文件组件中导入和使用图像时遇到了一些麻烦。有人可以帮我怎么做吗？这是我的代码 sn-p：
<template lang="html">
<img src="zapierLogo" />
</template>
<script>
import zapierLogo from 'images/zapier_logo.svg'
export default {
}
</script>
<style lang="css">
</style>
我尝试过使用:src、src="{{ zapierLogo }}" 等。但似乎没有任何效果。我也找不到任何例子。有什么帮助吗？
【问题讨论】：
src='images/zapier_logo.svg'
就这么简单：
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
取自vue cli生成的项目。
如果您想将图像用作模块，请不要忘记将数据绑定到您的 Vuejs 组件：
<template>
<div id="app">
<img :src="image"/>
</div>
</template>
<script>
import image from "./assets/logo.png"
export default {
data: function () {
return {
image: image
}
}
}
</script>
<style lang="css">
</style>
还有一个更短的版本：
<template>
<div id="app">
<img :src="require('./assets/logo.png')"/>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
【讨论】：
image: require('path/to/file')。
src="~src/assets/img/me.png"
:src="require('@/assets/image.png')" 为我工作。
如果你想通过 webpack 加载它们，你可以简单地使用 :src='require('path/to/file')' 确保你使用 : 否则它不会像 Javascript 一样执行 require 语句。
在 typescript 中，您可以执行几乎完全相同的操作：:src="require('@/assets/image.png')"
为什么以下通常被认为是不好的做法：
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
使用 Vue cli 构建时，webpack 无法确保资产文件将保持遵循相对导入的结构。这是由于 webpack 试图优化和分块出现在 assets 文件夹中的项目。如果您希望使用相对导入，您应该在 static 文件夹中执行此操作并使用：<img src="./static/logo.png">
【讨论】：
<img :src="require('@/assets/image.png')">?这对我不起作用。它抱怨找不到依赖项。
我最近遇到了这个问题，我正在使用 Typescript。 如果您像我一样使用 Typescript，那么您需要像这样导入资产：
<img src="@/assets/images/logo.png" alt="">
【讨论】：
这些在 JavaScript 和 TypeScript 中都适用于我
<img src="@/assets/images/logo.png" alt="">
或
<img src="./assets/images/logo.png" alt="">
【讨论】：
src="./assets/images/logo.png"，因为与静态不同，您无法确保在构建时如何捆绑资产目录中的项目。
你也可以像这样使用root快捷方式
<template>
<div class="container">
<h1>Recipes</h1>
<img src="@/assets/burger.jpg" />
</div>
</template>
虽然这是 Nuxt，但它应该与 Vue CLI 相同。
【讨论】：
我在quasar 中遇到问题，这是一个基于vue 的移动框架，标题语法~assets/cover.jpg 在普通组件中有效，但在我的动态定义组件中无效，由
let c=Vue.component('compName',{...})
终于完成了这项工作：
computed: {
coverUri() {
return require('../assets/cover.jpg');
}
}
<q-img class="coverImg" :src="coverUri" :height="uiBook.coverHeight" spinner-color="white"/>
根据https://quasar.dev/quasar-cli/handling-assets的解释
In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in <img src="./logo.png"> and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.
【讨论】：
对于 Vue 3，我必须使用
<template>
<div id="app">
<img :src="zapierLogo" />
</div>
</template>
<script>
import zapierLogo from 'images/zapier_logo.svg'
export default {
...
data: function () {
return {
zapierLogo
}
}
}
</script>
src="@/assets/burger.jpg" 和 src="../assets/burger.jpg" 似乎都不起作用。
【讨论】：
..当一切都失败时，就像在我的情况下，我试图导入一个占位符，我在多页 Vuelectro-app 中使用了几次 - 但这次在一个子子组件中，没有一个建议的解决方案起作用（因为他们通常会）..
<template>
<div id="app">
<img :src="image"/>
</div>
</template>
<script>
export default {
data() { return {image: null, ...} },
methods: {
solveImage(){
const path = require('path')
return path.join(process.cwd(), '/src/assets/img/me.jpg')
},
...
},
mounted: {
this.image = this.solveImage()
...
}
}
</script>
..应该这样做。
如果它在 created-lifecycle-hook 中效果更好，或者您希望全局要求路径并调用
this.image = path.join(...)
在其中一个钩子中 - 你应该测试自己。
【讨论】：
我也面临同样的问题来显示资产图像。最后，这两种方式对我来说都很好-
<img src="@/assets/img/bg1.png" />
和
<img :src="require('@/assets/img/bg1.png')" />
【讨论】：