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

Posted 2023-02-22

【中文标题】Vue.js 模板中的静态图片 src

【英文标题】：Static image src in Vue.js template

【发布时间】：2016-10-05 08:12:27

【问题描述】：

我的 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" >
            </a>
        </div>
</template>

给我一​​堆错误，比如：

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

[Vue 警告]：评估表达式“/static/img/clear.gif”时出错： TypeError：无法读取未定义的属性“调用”（在 组件：)

webpack.config.js:
module.exports = 
    // ...
    build: 
        assetsPublicPath: '/',
        assetsSubDirectory: 'static'
    

【参考方案1】：

我在使用 Vue 时遇到了类似的问题，我尝试通过从配置 json 文件导入数据然后使用 v-for 迭代数据来显示多个图像。

即使我将require('../../assets/' + filename) 直接放入 json 中，图像也永远不会显示。我最终意识到 Vue 将我的数据值解释为一个字符串，而不是一个函数。 javascript 支持作为返回类型的函数是一件好事。所以我做了这个功能：

  getImagePath(filename: string) 
    return require('../../assets/' + filename);
  

然后我从我的v-for 循环中调用了该函数，只需从我的配置中传入文件名：

<v-list-item :key="place.id" v-for="place in placesOfPower">
  <v-list-item-content class="justify-end">
    <v-img :src="getImagePath(place.image)"
           position="top center"
           
           />
  </v-list-item-content>
<v-list-item-content>

【参考方案2】：

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

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

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

【参考方案3】：

我在搜索存在图像时显示图像的解决方案时发现了此线程。我想显示包含 type 属性的数据库条目列表。每种类型都应该在我的 vue assets 文件夹中有一个合适的 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>

【参考方案4】：

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

不要忘记 balise img 中的属性 alt

【参考方案5】：

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

如果您不喜欢将文件保存在 static 文件夹 (relevant info) 中，则在 vue-2 中，或者 在vue-2 和vue-cli-3 中，如果您不想将文件保存在public 文件夹中（static 文件夹重命名为public）：

简单的解决方案是:)

<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" />
<img src="/assets/img/clear.gif" /> // in some case without dot ./

【讨论】：

使用 vue-cli-3，这个答案终于帮我动态加载了路径字符串。

@/assets/img/clear.gif)"> 为我工作。我的文件结构在 /assets/img/clear.gif 中。感谢您有很多选择。最后，一个为我工作。

@VinceBanzon 很高兴这对你有所帮助，别忘了投票 ;)

这仍然适用于 VueCLI 4.4。谢谢好心的先生，您刚刚获得了投票！ ;)

我把'@'放在变量里面。您的解决方案将“@”放在标签内，变量只放置文件名，而不是路径。太棒了！谢谢！

【参考方案6】：

声明值包含图片路径的新变量

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

然后调用变量

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

在html上绑定，这个例子：

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

希望对你有帮助

【参考方案7】：

我就是这样解决的：

      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

【讨论】：

它正在工作。我在答案中添加了一个沙盒示例。看看它。

太棒了。搜索1小时后。您能否还建议在这种特定情况下我们为什么需要@require

【参考方案8】：

@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>

【参考方案9】：

如果要将字符串绑定到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