[英]Why don't my images load in Vue.js 2?
I'm trying to get my images to load via a relative path in Vue.js 2 but something seems off. 我正在尝试通过Vue.js 2中的相对路径加载图像,但似乎有些问题。 I'm just getting my feet wet with regard to Vue and would appreciate any pointers.
我只是想了解Vue,不胜感激。 Said images are in the /src/assets/imgs directory.
所述图像位于/ src / assets / imgs目录中。
Below are the relevant code snippets for the component in question. 以下是有问题的组件的相关代码段。
<template>
<section class="container sources">
<h2>{{ heading }}</h2>
<div class="columns">
<div class="column" v-for="source in sources">
<figure :title="source">
<img :src="imgPath + source + '.png'" :alt="source + ' logo'">
<figcaption>{{ source }}</figcaption>
</figure>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'sources',
data () {
return {
heading: 'News Sources',
imgPath: 'src/assets/imgs/',
sources: [
'al-jazeera-english', 'associated-press', 'bbc-news', 'bbc-sport', 'business-insider', 'cnn',
'daily-mail', 'entertainment-weekly', 'espn', 'financial-times', 'fox-sports', 'hackernews',
'ign','independent', 'mtv-news', 'national-geographic', 'new-scientist', 'reuters', 'techcrunch', 'the-economist', 'the-guardian-uk', 'the-huffington-post', 'the-new-york-times',
'the-washington-post'
]
}
}
}
</script>
Edit: Added a screenshot of my project's (simple) file tree upon request. 编辑:根据要求添加了我项目的(简单)文件树的屏幕截图。 Said images are in the 'imgs' folder, of course.
这些图像当然在“ imgs”文件夹中。
Assuming you're using the webpack template from vue-cli
, you can simply use a relative path for static assets . 假设您使用的是来自
vue-cli
的webpack模板,则可以简单地为静态资产使用相对路径。
<img :src="'./assets/imgs/' + source + '.png'"
Alternatively, put your images in the static
directory and reference them with an absolute path, ie 或者,将图像放在
static
目录中,并使用绝对路径引用它们,即
<img :src="'/static/imgs/' + source + '.png'"
To create a link to list contained in an assets folder via JS in Vue.js you must first import the image: 要通过Vue.js中的JS创建指向包含在资产文件夹中的列表的链接,您必须首先导入图像:
import img from '@/assets/myImage.png' 从'@ / assets / myImage.png'导入img
Then refer to the imported image file in a variable: image:img, 然后在变量中引用导入的图像文件:image:img,
Then lastly src the img to the img tag: :src="image" 然后,最后将img保存到img标签::src =“ image”
In my case I used ../assets/{name of image} : 就我而言,我使用了../ assets / {图像名称} :
src/components/SomeComponent.vue SRC /组件/ SomeComponent.vue
<style>
.black.square{
background: url(../assets/logo.png);
}
</style>
This should work 这应该工作
<img :src="image" >
data () {
return {
image: require('@/assets/images/pin.svg')
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.