使用资产变量中的图像 src答案

【问题标题】：Using image src from asset variables使用资产变量中的图像 src
【发布时间】：2021-03-15 15:22:57
【问题描述】：

我最近遇到了图像问题。一切正常，直到您必须在页面上显示图像列表。

问题在于，当我们直接为带有硬编码字符串的图像提供src 时，它适用于像~/assets/any-image.png 这样的url。但是如果我尝试将 url 移动到任何变量/对象/数组中，我必须指定包含 URL 的 :src="myVariable"。

代码示例：

<template>
  <div>
    Problem with images
    <img :src="image.url" alt="">
    <img :src='require(image.url)' alt="">
  </div>
</template>

<script>
export default {
  data () {
    return {
      image:
        {
          url: '~/assets/icon.png',
          type: 'asset'
        }
    }
  }

}
</script>

在这里，我尝试使用带有 ~ 和 @ 的资产，也可以带和不带斜线。当然图像存在于 assets 文件夹中，但由于 src url 是通过任何变量（不是直接）提供的，因此不提供 assets url，因此图像 url 看起来像 host:port/~/assets/... 不存在服务器。

在这个例子中，我有一个想法，用包含 url 及其类型（资产/静态）的对象替换图像 url，并检查是否为资产类型，然后使用require(variable)，但遇到"Cannot find module '~/assets/icon.png'" 的问题

有人解决了这个问题吗？

【问题讨论】：

标签： javascript vue.js webpack vue-component vue-cli

【解决方案1】：

绑定到资产变量图像时需要使用require。例如：

<img :src="url">

url: require('@/assets/icon.png')

如果你的json只包含文件名，你可以在模板中放置require：

<img :src="require('@/assets/' + url)">

url: 'icon.png'

【讨论】：

【解决方案2】：

感谢Dan 和他的answer 我有一个通用的最终解决方案：图片包含它的链接和类型：

image: {
  url: '/any-asset-folder/image.png'
  type: 'asset'
}

那么用三元运算符的结果是

<img
  :src="image.type === 'asset' 
    ? require('@/assets'+image.url) 
    : image.url"
>

通过这种方式，无论图像来自资产还是静态或外部，我都可以正常工作:)

【讨论】：