Question

我的Vue组件包含一些图像。我想稍后进行延迟加载，所以我需要先将图像的src设置为一个小图像。

<template>
        <div v-for="item in portfolioItems">
            <a href="#{{ item.id }}">
                <img
                    data-original="{{ item.img }}"
                    v-bind:src="/static/img/clear.gif"
                    class="lazy" alt="">
            </a>
        </div>
</template>

给了我一堆错误，比如：

[Vue警告]：表达式无效。生成的功能   正文：/scope.static/scope.img/scope.clear.gif vue.common.js：1014 [Vue

[Vue警告]：评估表达式时出错＆＃34; /static/img/clear.gif"：   TypeError：无法读取属性＆＃39; call＆＃39;未定义的（发现于   组件：）

webpack.config.js： module.exports = { // ... 构建：{ assetsPublicPath：＆＃39; /＆＃39;， assetsSubDirectory：＆＃39;静态＆＃39; } }

Answer 1

如果要将字符串绑定到src属性，则应将其包装在单引号上：

<img v-bind:src="'/static/img/clear.gif'">
<!-- or shorthand -->
<img :src="'/static/img/clear.gif'">

IMO您不需要绑定字符串，您可以使用简单的方法：

<img src="/static/img/clear.gif">

在此处查看有关图像预加载的示例：http://codepen.io/pespantelis/pen/RWVZxL

Answer 2

此解决方案适用于Vue-2用户：

如果不想将文件保存在vue-2文件夹（relevant info）中，请在static中，或
在vue-2和vue-cli-3中，如果您不想将文件保存在public文件夹中（static文件夹重命名为public）： / li>

简单的解决方法是：）

<img src="@/assets/img/clear.gif" /> // just do this:
<img :src="require(`@/assets/img/clear.gif`)" // or do this:
<img :src="require(`@/assets/img/${imgURL}`)" // if pulling from: data() {return {imgURL: 'clear.gif'}}

如果您想将静态图片保存在static/assets/img或public/assets/img文件夹中，请执行以下操作：

<img src="./assets/img/clear.gif" />

Answer 3

@Pantelis回答某种方式引导我找到类似误解的解决方案。我正在处理的留言板项目需要显示可选图像。我试图让src = imagefile连接固定路径和变量文件名字符串，直到我看到“'''引号的古怪使用： - ）

<template id="symp-tmpl">
  <div>
    <div v-for="item in items" style="clear: both;">
      <div v-if="(item.imagefile !== '[none]')">
        <img v-bind:src="'/storage/userimages/' + item.imagefile">
      </div>
      sub: <span>@{{ item.subject }}</span>
      <span v-if="(login == item.author)">[edit]</span>
      <br>@{{ item.author }}
      <br>msg: <span>@{{ item.message }}</span>
    </div>
  </div>
</template>

Answer 4

这就是我的解决方法。

      items: [
        { title: 'Dashboard', icon: require('@/assets/icons/sidebar/dashboard.svg') },
        { title: 'Projects',  icon: require('@/assets/icons/sidebar/projects.svg') },
        { title: 'Clients', icon: require('@/assets/icons/sidebar/clients.svg') },
      ],

在模板部分：

<img :src="item.icon" />

See it in action here

Answer 5

您只需要使用简单的代码 <img alt="img" src="../assets/index.png" />

不要忘记balise img中的属性alt

Answer 6

声明新变量，该值包含图像的路径

const imgLink = require('../../assets/your-image.png')

然后调用变量

export default {
    name: 'onepage',
    data(){
        return{
            img: imgLink,
        }
    }
}

将其绑定到html上，此示例：

<a href="#"><img v-bind:src="img" alt="" class="logo"></a>

希望这会有所帮助

Answer 7

我在搜索存在图像时显示图像的解决方案时发现了此线程。我想显示包含 type 属性的数据库条目列表。每种类型都应该在我的 vue 资产文件夹中有一个合适的 png 文件。如果在没有事先添加图像的情况下添加新类型，整个列表就会中断。

我在堆栈溢出时发现了 "Catch an error on requiring module in node.js"。 Peter Lyons 的 answer 引导我找到了我的解决方案：

<template>
  <v-data-table :items="items">
    <template v-slot:item.type="{ item }">
      <v-img
        v-if="typeImageSource(item.type)"
        :src="typeImageSource(item.type)"
      />
      <template v-else>
        {{ item.type }}
      </template>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data () {
    return {
      // In reality this gets filled from a db:
      items: [
        { id: 1, type: 'abc' },
        { id: 2, type: 'abcd' },
        { id: 3, type: 'efg' },
      ]
    }
  },
  methods: {
    typeImageSource: function (type) {
      let src = ''
      try {
        src = require(`@/assets/types/${('' + type).toLowerCase()}.png`)
      } catch (error) {
        console.warn(`Image for type ${type} could not be found! Please add "${('' + type).toLowerCase()}.png" to the folder "@/assets/types/".\n\n`, error)
        return null
      }
      return src
    },
  },
}
</script>

Answer 8

如果你使用nuxt 使用 <img :src="'_nuxt/path_to_your_local_image'" />

如果你使用的是 vue 首先使用静态 src 导入：<img src="path_to_your_local_image" />

然后检查图像元素以查看向浏览器呈现的 src 然后用动态 src 替换它

Vue.js模板中的静态图像src

8 个答案: