精华内容
下载资源
问答
  • vue里面的js引入图片,必须用require

    千次阅读 2020-09-21 16:33:54
    vue中js引入图片,须用require引入 一般情况下,我们在vue里面引入图片的话,基本上是这样子写的 <img src="../../assets/logo.png" alt=""> 但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js...

    vue中js引入图片,须用require引入

    一般情况下,我们在vue里面引入图片的话,基本上是这样子写的

         
          <img src="../../assets/logo.png" alt="">
          
    

    但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require
    下面列举例子以供参考

    <template>
      <div style="display:flex;">
        <div v-for="item in imgUrl" :key="item.id">
          <img :src="item.imgSrc" class="num" />
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
        //下面的正确的  注意要用require
          imgUrl: [
            { id: 1, imgSrc: require("../../images/1.jpg") },
            { id: 2, imgSrc: require("../../images/2.jpg") },
            { id: 3, imgSrc: require("../../images/3.jpg") },
            
    	    //下面是错误的
    	    // {id: 1, imgSrc: "../../images/1.jpg"},
            // {id: 2, imgSrc: "../../images/2.jpg"},
            // {id: 3, imgSrc: "../../images/3.jpg"},
          ],
        };
      },
      created() {},
      methods: {}
    };
    </script>
    
    <style>
    	.num {
     	 margin-right: 1px;
      	 width: 300px !important;
      	 height: 300px !important;
         }
    </style>
    

    最后放下效果图
    在这里插入图片描述

    展开全文
  • 问题:three.js 引入图片资源报跨域一样。 网上修改源码,方法在我尝试下,没用。 看了一下官方的示例,发现官方使用的oss上的图片。 我也换成了oss服务上的https图片资源路径。试了一下。还是报错 nb。 解决...

    问题:three.js 引入图片资源报跨域一样。

    网上修改源码,方法在我尝试下,没用。

    看了一下官方的示例,发现官方使用的oss上的图片。

    我也换成了oss服务上的https图片资源路径。试了一下。还是报错    nb。

    解决方法:

    需要在oss上配置跨域*。

    这个应该是核心的问题。

    问题解决。

     

    我正好有oss服务器,所以别的方法没有试过。

    猜测nginx 配置

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    

    应该也能解决。

     

     

     

    展开全文
  • next.js引入图片404问题

    2021-01-26 12:31:34
    next.js项目中,引入图片报404问题,路径是对的,但无法正确找到图片 2.原因 没有写入相应规则,比如react中,webpack自己已经默认做了配置,但next.js中需要手动配置 **最好将图片放入最外层的static文件中 ...

    1.场景

    next.js项目中,引入图片报404问题,路径是对的,但无法正确找到图片

    2.原因

    没有写入相应规则,比如react中,webpack自己已经默认做了配置,但next.js中需要手动配置

    **最好将图片放入最外层的static文件中

    引入方式

    <img src="/static/image/10440.jpg" alt="icon" />

    3.配置

    3.1安装url-loader

    yarn add url-loader

    3.2 在next.config.js文件中写入以下代码:

    就是将react中webpack的配置复制了过来

    config.module.rules.push({
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
          loader: require.resolve("url-loader"),
          options: {
            limit: 10000,
            name: "static/media/[name].[hash:8].[ext]",
          },
        });

    示例:

    展开全文
  • 关于vue中main.js引入图片的问题

    千次阅读 2019-01-11 11:12:09
    在使用v-lazyload实现图片懒加载的时候,在main.js引入图片地址的时候出现了问题 我发现如果引入的路径是根目录下的/static中的图片,没有任何问题,但是如果引入的是assets目录下的图片就找不到图片 后来去网上查...

    刚接触vue的项目,很多东西需要学习
    在使用v-lazyload实现图片懒加载的时候,在main.js中引入图片地址的时候出现了问题
    我发现如果引入的路径是根目录下的/static中的图片,没有任何问题,但是如果引入的是assets目录下的图片就找不到图片
    后来去网上查了一下才知道,原来是main.js中的图片除了/statci目录外都需要通过reqiure('图片路径')的方式进行加载
    通过reqiure('图片路径')的方式引入的原因是因为打包之后会将图片转成base64格式打包进入js文件中

    • 综上,vue中在js文件中引入外部文件都需要通过import获取require进行引入
    展开全文
  • 来源 | ...title:‘你看我叼吗2‘,id:2}, {url:require(‘../assets/a4.png‘),title:‘你看我叼吗3‘,id:3} ] }), vue中的js引入图片,必须require进来 或者引用网络地址 本文完~
  • vue中的js引入图片,必须require进来

    千次阅读 2019-09-01 01:06:44
    vue怎样能把assets里面的图片拿出来? 1.在img标签里面直接写上路径: <img src="../assets/a1.png" class="" width="100%"/> 2.利用数组保存再循环输出: return { imgs: [ {url: require('@/assets/...
  • vue.js引入图片

    2018-12-17 14:06:00
    vue.js引入图片 vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入。而在template中或者js动态引入时,会显示不出图片。 解决一 图片通过后端返回引入网络图片路径...
  • 主要介绍了Vue.js引入图片路径的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 前言: 一样的本地图片地址,通过img标签引用没问题,但是放在...所以想在js引入本地图片的地址,可以通过import导入图片。代码如下。 代码: import lvbuURL from '../assets/hero.png' export default { lvbu: { na
  • 如何在HTML中引入图片js以及css

    千次阅读 2019-05-29 13:46:06
    如何在HTML中引入图片js以及css 作为前端小白,从今天开始我将不断的在博客上记笔记,和大家一起学习、成长! 我使用的编辑器是WebStorm,首先,在编辑器里新建一个project,会有一个相应的保存项目内容的文件夹。...
  • vue,在js引入图片

    2019-05-27 11:32:12
    需要用require引入
  • React.js引入图片的几种方法

    千次阅读 2020-05-25 16:24:29
    方式一:将图片文件放置public文件夹中,img标签直接引入图片的绝对路径。 如图,文件夹目录如下 引入代码如下: <img src="/assets/logo.png" alt="" className="logo" /> 方式二:通过css文件引入 注:...
  • js引入图片的方式

    千次阅读 2017-01-12 15:18:10
    $(document).ready(function(){    var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/";  var shortenedUrl = window.document.location.href.replace(bas
  • Vue.js引入图片路径的几种方式

    千次阅读 2020-07-07 19:41:09
    vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 1、在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。 诸如 <...
  • vue引入图片方法(require与import)

    千次阅读 2019-09-27 10:31:37
    1.vue的三种图片引入方式 ...2.vue中的js引入图片,必须require进来 3.Vue js 中 require,import区别? 4.vue-cli项目中img使用require动态获取图片 5.vue中的js引入图片,必须require进来 ...
  • JavaScript js 引入CDN 不生效 注意事项

    千次阅读 2018-12-06 11:27:00
    【博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,...js可以用引入cdn替代引入js本地文件的方式, 使用一些js工具; 引入某个工具的cdn可以远程使用到js工具的函...
  • vue中引入图片问题

    千次阅读 2019-02-13 18:52:05
    问题1:vue中动态修改img的src属性,直接改路径图片不显示 问题2:我在vue中创建common.js为...解决:vue中的js引入图片,必须require进来 例如: 1. html &lt;img :src='imgurl' /&gt; js data(){ return { im...
  • 一些编辑器最后生成的公式都是图片的样式,我们复制粘贴不出来具体的样式。我们需要用这个插件来转化图片公式
  • project的目录结构如下: ...在js文件中插入图片的代码为Ext.form.Field.prototype.msgTarget="qtip"; var pic = new Ext.Component({ width: 400, //图片宽度 height: 80, //图片高度 autoEl: {
  • 头部引入第三方js文件: <script type="text/javascript" src="js/echo.min.js"></script>
  • vue中引入图片

    2019-12-26 10:21:08
    重点: ~@assets 将图片当成模块引入 背景图片 background-image: url(~@/assets/img/index/...//Vue.js引入图片路径的方式 html: :src="item.url" js: data(){ return{ twoList: [{ url: require('.....
  • vue3.0中index.html引入静态文件。...scripttype="text/javascript"src="<%=BASE_URL%>static/js/createjs-2015.11.26.min.js"></script> 2. 在public下新建static,然后建js等相应文件夹
  • 想要使用JavaScript添加图片,可以先使用createElement()方法创建一个img元素,并向img元素的src属性赋图片的URL地址值;然后使用appendChild()方法将img元素添加到指定dom对象中,即可。creat...
  • 通常vue中会定义一些别名比如 '@': resolve('src'), ...但是在style书写css以及template书写页面结构引入图片时这样就不行了,解决办法: 在 @ 前加一个 ~ 即刻,亲测有效 结构: <div class="part...
  • react 项目中引入图片的几种方式

    千次阅读 2019-07-06 14:16:29
    因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片 需要用下面的方式引入 <img src={require('../images/picture.png')} alt="标签"/> 背景图片引入 1 第一种就是常规的...
  • 首先我们要清楚Vue-cli是基于Webpack来进行的打包,其次我们再来看一下Vue-cli的官网是如何给出我们的打包引入图片方式的。 二、两种引入方式 简单的来说 一种是相对引入方式,一种是绝对引入方式 相对引入: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 139,299
精华内容 55,719
关键字:

js怎么引入图片