时间戳

首页 > 解决方案 > 使用资产变量中的图像 src

javascript - 使用资产变量中的图像 src

问题描述

我最近有图像问题。一切都很好，直到您必须在页面上显示图像列表。

问题是，当我们直接给出src带有硬编码字符串的 for 图像时，它可以使用~/assets/any-image.png. 但是如果我尝试将 url 移动到任何变量/对象/数组中，我必须指定:src="myVariable"包含 URL 的那个。

代码例如：

<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 文件夹中，但由于srcurl 是通过任何变量（不是直接）提供的，因此不会提供 assets url，因此图像 url 看起来host:port/~/assets/...在服务器上不存在。

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

有人解决了这个问题吗？

标签： javascriptvue.jswebpackvue-componentvue-cli

解决方案

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

<img :src="url">

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

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

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

url: 'icon.png'

推荐阅读